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

Question

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

Answer 1

MPA 只是一种创建多个 html 文件的方法，每个文件都有自己的 js 包——本质上是多个独立的 Vue 应用程序。由于没有路由器，因此没有客户端路由，每个请求都直接发送到服务器。所以服务器是唯一可以检测情况（请求未知资源）和 return 自定义 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"],
    },
  },
};

这是不言而喻的，但这只适用于生产环境，因为路由是由网络服务器完成的。本地开发时，直接访问404页面查看404页面。

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

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

vue.js

vue-router

vue-component

multi-page-application