Serving a custom “Page not found” 404 page in a Vue.js MPA (multipage application) by modifying vue.config.js?

Question

Is there any way to serve a custom “Page not found” 404 page in a Vue.js MPA (multipage application) by modifying vue.config.js? (I am not using vue-router)

score 0 · Answer 1 · answered Dec 08 '20 at 16:06

0

MPA is just a way to create multiple html files each with its own js bundle - essentially multiple independent Vue apps. As there is no router, there is no client-side routing and every request goes directly to the server. So the server is only place where you can detect the situation (unknown resource requested) and return custom 404 page...

answered Dec 08 '20 at 16:06

Michal Levý

33,064
4
68
86

Thanks @Michal Levy for sharing. Since the project is hosted on Github pages I don't have much webs server config flexibility, so was hoping vue.config.js (since that is a nice powerful little thing) could help. But I understand now. Will dig into how to make it happen on the Github Pages side. Thanks – Pat Dec 08 '20 at 16:16
1

https://docs.github.com/en/free-pro-team@latest/github/working-with-github-pages/creating-a-custom-404-page-for-your-github-pages-site – Michal Levý Dec 08 '20 at 16:19

Pat · Accepted Answer · 2020-12-15T11:10:11.630

I’ve managed to solve this with only vue.config.js with the below. I've followed the approach from a previous answer of mine.

├── src
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   └── HelloWorld.vue
│   └── pages
│       ├── home
│       │   ├── App.vue
│       │   ├── cache.js
│       │   └── main.js
│       ├── 404
│       │   ├── App.vue
│       │   └── main.js
└── vue.config.js

And vue.config.js:

module.exports = {
  pages: {
    index: {
      entry: "./src/pages/home/main.js",
      template: "public/index.html",
      filename: "index.html",
      title: "Home",
      chunks: ["chunk-vendors", "chunk-common", "index"],
    },
    404: {
      entry: "./src/pages/404/main.js",
      template: "public/index.html",
      filename: "404.html",
      title: "404",
      chunks: ["chunk-vendors", "chunk-common", "404"],
    },
  },
};

It goes without saying, but this only works in production as the routing is done by the web server. When you developed locally, check the 404 page by visiting the 404 page directly.

Serving a custom “Page not found” 404 page in a Vue.js MPA (multipage application) by modifying vue.config.js?

2 Answers2