Vue history 模式下路由刷新 404

今天在用 vue 重写 I Am I の 实验室 的时候，发现了一个问题，vue-router 的默认路由是 hash 模式，也就是说，默认路由的路径是这样的

1

url/#/path

我改为了 history 模式，路由的路径是这样的

1

url/path

改过之后一切正常，但是当我上传到服务器之后，第一次切换页面，路由是正常的，但是当我刷新页面的时候，服务器没有获取到对应的路由，出现了 404

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

当服务器收到请求的时候，就返回 index.html，然后让我们自定义的路由去处理，这里我使用的是 nginx，配置如下

1
2
3

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

我把这个项目放到了 Github 上，通过 Github Actions 自动部署到 Vercel 上，所以我们重新定义 Vercel 的规则。

直接在 public 目录下新建一个 vercel.json，然后把下面的内容复制过去，就可以了。

1
2
3

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

其次就是为什么本地不会出现这个问题，最后发现是因为 vue-cli 在 webpack 配置中默认开启了 historyApiFallback。

我们可以在 @vue\cli-service\lib\commands\serve.js 中找到这个配置，当我们访问一个不存在的路由的时候，会返回 index.html，然后让前端的路由去处理。

1
2
3
4
5
6
7
8

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