手机端刷新总是 404？你需要知道 SPA Fallback 规则

记录一次手机端下拉刷新页面返回 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。但刷新页面是浏览器行为，它会绕过前端路由，直接向服务器要文件。

原理

单页应用的路由分两种：

路由方式	谁处理的	会发请求吗
点击链接跳转	Vue Router（前端）	不会
刷新页面 / 直接访问 URL	服务器	会

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

解决

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

json 复制代码

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

第二条规则的含义是 ：所有不以 /api 开头的请求，全部返回 index.html。

这样当用户在 /post/123 刷新时，Vercel 不再返回 404，而是把 index.html 交给浏览器。浏览器拿到之后加载 Vue 和 Vue Router，Router 看到地址栏是 /post/123，就渲染出对应的帖子详情页。

总结

这个问题本身不复杂，但暴露了一个很容易被忽略的部署细节：单页应用必须配置 SPA Fallback 规则 。不管是 Vercel、Netlify 还是 Nginx，都需要告诉服务器：找不到文件时，把 index.html 交给前端，让前端路由接管。

以后再搭新项目，这个规则应该在第一次部署时就配好，而不是等用户反馈 404 了再去修。不同平台的配置方式不同，但核心思路都一样：

平台	配置方式
Vercel	`vercel.json` 里加 Rewrite 规则
Netlify	项目根目录加 `_redirects` 文件：`/* /index.html 200`
Nginx	`try_files $uri $uri/ /index.html;`

这就是这次踩坑学到的东西------不是修了一个 Bug，而是补齐了一个部署常识。