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.