Vue.js historyApiFallback不生效，部署后刷新路由报404是什么原因？

问题根因 #

你使用的是Vue Router的history模式：

• 开发环境运行正常，是因为你配置中devServer.historyApiFallback: true会自动把所有路由请求重定向到index.html，由前端路由接管逻辑
• 生产环境部署后404，是因为你使用的Web服务器（Nginx、Apache、静态托管服务等）默认没有配置对应的回退规则，直接访问/test这类非根路径路由时，服务器会去磁盘查找对应路径的静态文件，找不到就返回404错误

你的vue.config.js配置本身没有问题，publicPath: '/'适配部署在域名根路径的场景。

生产环境配置方案 #

Nginx 部署配置 #

在Nginx站点配置的location块添加try_files规则即可：

location / {
  root 你的静态文件存放路径/dist;
  index index.html index.htm;
  # 核心规则：找不到对应文件就回退到index.html交给前端路由处理
  try_files $uri $uri/ /index.html;
}

Apache 部署配置 #

在项目public目录下新建.htaccess文件，打包后会自动输出到dist根目录，内容如下：

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

云服务商静态托管配置（腾讯云COS、阿里云OSS等） #

在托管后台找到「自定义错误规则」配置，把404错误的响应状态码改为200，跳转地址设置为/index.html即可。

兜底方案 #

如果不想修改服务器配置，可以把Vue Router的模式改为hash模式，路由路径会携带#，无需服务端额外配置就能正常刷新，缺点是URL美观度较低。

注意事项 #

如果你的项目是部署在域名子路径下（比如https://domain.com/sub-app/），需要同步修改三处配置：

• vue.config.js中的publicPath改为/sub-app/
• Vue Router实例的base参数改为/sub-app/
• 服务端回退规则的index路径改为/sub-app/index.html

内容的提问来源于stack exchange，提问作者air walk