vue.js - 通过修改 vue.config.js 在 Vue.js MPA（多页应用程序）中提供自定义“找不到页面”404 页面？

Question

有没有办法通过修改 vue.config.js 在 Vue.js MPA（多页应用程序）中提供自定义的“找不到页面”404 页面？（我没有使用 vue-router）

Answer 1

MPA 只是一种创建多个 html 文件的方法，每个文件都有自己的 js 包——本质上是多个独立的 Vue 应用程序。由于没有路由器，因此没有客户端路由，每个请求都直接发送到服务器。因此，服务器只是您可以检测情况（请求的未知资源）并返回自定义 404 页面的地方...

Answer 2

我已经设法通过vue.config.js以下方法解决了这个问题。我遵循了我之前回答的方法。

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

并且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"],
    },
  },
};

不用说，但这仅在生产中有效，因为路由是由 Web 服务器完成的。本地开发时，直接访问404页面查看404页面。