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

问题描述

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

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

如何使其返回404代码？

推荐答案

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

创建vue.config.js(如果不存在)，内容如下：

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

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