使用 Vue-CLI 创建的应用程序提供 404 页面

Question

我正在使用 Vue-CLI 创建 Vue 应用程序。我不喜欢的一种行为是，任何不存在的 URL（例如，localhost:8080/nonexistent/file.html）都得到服务，代码为 200，就好像它是根一样：localhost:8080.

这有时会使调试 XHR 请求变得非常混乱。

如何使它成为 return 404 代码？

Answer 1

您观察到的特征实际上来自 webpack-dev-server's historyApiFallback, which responds with index.html for unresolved URLs (intended for SPAs with client-side routing). This is enabled by default in Vue CLI projects, but you can disable it with a Vue CLI devServer config:

1. 使用以下内容创建 vue.config.js（如果它不存在）：

   module.exports = {
     devServer: {
       historyApiFallback: false
     }
   }
   

2. 重启你的开发服务器（npm run serve）。