使用使用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禁用它:

  1. 创建vue.config.js(如果不存在),内容如下:

    module.exports = {
      devServer: {
        historyApiFallback: false
      }
    }
    
  2. 重新启动开发服务器(npm run serve)。

相关文章