手机端刷新出现404问题：SPA Fallback规则详解

问题 论坛在电脑端运行良好，所有功能都能正常使用。然而当用户在移动设备访问时，页面刷新操作会触发404错误，这一问题需要引起重视。 值得注意的是，同样的页面在桌面端刷新完全正常，这凸显了移动端特殊性问题。 排查 移动端刷新操作实际上会触发浏览器向服务器发送新的URL请求。举例来说，当用户访问/post/123这个页面并刷新时，浏览器会直接向Vercel服务器请求/post/123这个资源。 核心问题在于：Vercel服务器上根本不存在/post/123这个物理文件。由于Vue是单页应用，所有路由都由前端Vue Router模拟实现，服务器上仅有一个index.html文件。因此Vercel收到请求后会直接返回404错误。 桌面端通过链接跳转能正常工作的原因是：这种导航方式完全由Vue Router在客户端处理，不会向服务器发送请求。而刷新操作是浏览器原生行为，会绕过前端路由直接请求服务器资源。 原理 单页应用的路由机制可分为两种类型： 路由方式处理方是否发送请求链接跳转Vue Router（前端）否页面刷新/直接访问服务器是 当服务器收到不存在的文件请求时，就会返回404状态码，这就是问题的根源所在。 解决 需要在项目根目录的vercel.json配置文件中添加Rewrite规则。该文件通常已包含API请求转发规则，现在需要补充页面路由处理规则： { "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交给前端路由处理。 平台配置方法Vercel在vercel.json中添加Rewrite规则Netlify项目根目录创建_redirects文件：/* /index.html 200Nginx配置try_files $uri $uri/ /index.html; 这个经验告诉我们，SPA Fallback规则应该在项目首次部署时就配置妥当，而不是等到用户报错后再补救。不同平台的实现方式虽有差异，但核心原理始终如一。