Vue history 模式下路由刷新 404

近期在重写 I Am I の 实验室 时，博主遇到了一个 Vue 路由的问题。默认情况下，vue-router 使用的是 hash 模式，这时路由的路径通常会像这样

1

url/#/path

而博主将其修改为了 history 模式，使得路由路径变成

1

url/path

修改后，路由在本地开发环境正常工作，但是当博主将其部署到服务器之后，第一次切换页面时路由正常，但当博主刷新页面时，路由会报 404 错误

解决方案

这个问题解决起来也很简单，最近重构 TenAPI 也是遇到了类似的问题，通过编写伪静态规则即可解决。

假设你使用的是 nginx 服务器，可以在配置文件中加入以下规则

1
2
3

location / {
  try_files $uri $uri/ /index.html;
}

如果你使用的是 Apache 服务器，则需要在 .htaccess 文件中配置如下

1
2
3
4
5
6
7
8

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

而博主是将项目放到了 Github 上，同时通过 Github Actions 自动部署到 Vercel 上，所以我们需要自定义 Vercel 的规则。

直接在 public 目录下新建一个 vercel.json 配置文件，内容如下：

1
2
3

{
  "rewrites": [{ "source": "/:path*", "destination": "/index.html" }]
}

这样，所有路由请求都会被重定向到 index.html，然后交由 Vue 路由处理。

为什么本地不会出现这个问题？

在开发环境下，vue-cli 默认开启了 historyApiFallback 配置，这样当访问一个不存在的路由时，webpack-dev-server 会返回 index.html，由前端路由来处理。

1
2
3
4
5
6
7
8

historyApiFallback: {
    disableDotRule: true,
    htmlAcceptHeaders: [
        'text/html',
        'application/xhtml+xml'
    ],
    rewrites: genHistoryApiFallbackRewrites(baseUrl, options.pages)
},