记录一次手机端下拉刷新页面返回 404 的排查过程，以及 Vue 单页应用在 Vercel 上的正确部署姿势。

问题

论坛上线后，在电脑上浏览一切正常——点击链接跳转、前进后退都没问题。但用手机打开，上滑刷新页面时，浏览器直接显示 404 Not Found。

奇怪的是，同一个页面在电脑上刷新是正常的，为什么手机端不行？

排查

手机端上滑刷新，本质上是浏览器重新向服务器请求当前 URL。比如用户在 /post/123 这个页面刷新，浏览器就会向 Vercel 服务器请求 /post/123 这个文件。

问题来了——Vercel 服务器上根本没有 /post/123 这个文件。Vue 是单页应用，所有路由都是前端用 Vue Router 模拟出来的，服务器上只有一个 index.html。所以 Vercel 收到这个请求后，直接返回了 404。

那为什么电脑端点击链接跳转没问题？因为点击链接是 Vue Router 在浏览器端做的“假”页面切换，根本没有向服务器发请求。所以不会触发 404。但刷新页面是浏览器行为，它会绕过前端路由，直接向服务器要文件。

原理

单页应用的路由分两种：

服务器收到请求后，发现没有对应的文件，就返回 404。这就是根因。

解决

在项目根目录的 vercel.json 里，加一条 Rewrite 规则。这个文件之前已经有一条规则用来转发 API 请求，现在再加一条处理页面路由：

{
  "rewrites": [
    {
      "source": "/api/:path*",
      "destination": "https://xxx.onrender.com/api/:path*"
    },
    {
      "source": "/((?!api).*)",
      "destination": "/index.html"
    }
  ]
}