手机端刷新出现404问题：SPA Fallback规则你必须了解

论坛手机端刷新出现404错误？这可能是SPA应用部署时忽略的关键配置问题。下面通过具体案例解析原因并提供解决方案。

问题

电脑端访问论坛各项功能均正常，但在手机端上滑刷新页面时，浏览器却显示404错误。值得注意的是，相同操作在电脑端却能正常刷新。

排查

当用户在手机端执行刷新操作时，浏览器会向服务器重新请求当前URL。例如访问/post/123页面时，服务器将收到对该路径的请求。由于Vue单页应用仅在客户端通过Router模拟路由，服务器上实际只存在index.html文件，因此直接返回404状态码。

电脑端通过点击链接跳转时，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页面时，服务器不再返回404，而是提供index.html文件，由前端路由解析URL并渲染对应页面。

总结

本次故障揭示了SPA应用部署时的重要配置要点：必须设置Fallback规则确保路由正常工作。无论是Vercel、Netlify还是Nginx，都需要配置服务器在找不到文件时返回index.html。各平台具体配置方式如下：

部署平台	配置方法
Vercel	vercel.json中添加Rewrite规则
Netlify	创建_redirects文件并写入/* /index.html 200
Nginx	配置try_files $uri $uri/ /index.html;

这个案例提醒我们，SPA应用的Fallback配置应该作为初始部署的必要步骤，而非出现问题后的补救措施。