Zui近咱就是说弄了个新项目，上线后在电脑上浏览一切正常，但用手机打开，上滑刷新页面时浏览器直接显示 Not Found，哈哈，咋回事呢？

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

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

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

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

简单说就是当服务器找不到请求的文件时把 index.html 返回给前端，让前端路由接管后续的渲染逻辑。

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

以后再搭新项目，这个规则应该在第一次部署时就配好，而不是等用户反馈 Not Found 了再去修。不同平台的配置方式不同，但核心思路dou一样：找不到文件时 fallback 到 index.html。

Vercel 怎么配？

{ "rewrites": }

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

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