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

【问题标题】：Serve a 404 page with app created with Vue-CLI使用 Vue-CLI 创建的应用程序提供 404 页面
【发布时间】：2018-12-13 23:17:58
【问题描述】：

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

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

如何让它返回 404 代码？

【问题讨论】：

你在用vue-router吗？
不，只是默认 vue create 附带的标准内容。

标签： vue.js vuejs2 http-status-code-404 vue-cli

【解决方案1】：

您观察到的功能实际上来自webpack-dev-server's historyApiFallback，它以index.html 响应未解析的 URL（用于具有客户端路由的 SPA）。这在 Vue CLI 项目中默认启用，但您可以使用 Vue CLI devServer config 禁用它：

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

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

重新启动您的开发服务器 (npm run serve)。

【讨论】：