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

Posted 2023-02-22

【中文标题】通过修改 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?

【发布时间】：2021-03-19 20:33:24

【问题描述】：

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

【参考方案1】：

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

【讨论】：

感谢@Michal Levy 的分享。由于该项目托管在 Github 页面上，我没有太多的网络服务器配置灵活性，所以希望 vue.config.js（因为这是一个很好的强大的小东西）可以提供帮助。但我现在明白了。将深入研究如何在 Github Pages 方面实现它。谢谢

docs.github.com/en/free-pro-team@latest/github/…

【参考方案2】：

我已经设法通过下面的vue.config.js 解决了这个问题。我遵循了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

还有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页面即可。