React+Vite部署Vercel后非首页刷新出现404错误求助

这个问题是单页应用（SPA）的典型场景：前端路由由react-router在浏览器端处理，但刷新页面时，浏览器会直接向Vercel服务器请求对应路径的资源（比如/about），而服务器上并没有这个物理文件，因此返回404。

解决方法很简单，只需在项目根目录创建vercel.json配置文件，添加重写规则，让所有请求都指向index.html，交由React Router处理路由：

{
  "rewrites": [
    { "source": "/(.*)", "destination": "/index.html" }
  ]
}

将这个文件添加到项目根目录后，重新提交代码到Vercel完成部署，刷新非首页的页面就不会再出现404错误了。

内容的提问来源于stack exchange，提问作者Santa