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

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.