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)

Answer 1

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.

Answer 2

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...