Vercel部署React+Vite项目刷新子路由出现404错误求助

核心解决方案：修正vercel.json配置 #

你的问题出在Vercel的路由规则配置上，单页应用（SPA）的前端路由需要服务器将所有非静态资源的请求转发到入口文件index.html，由React Router接管路由逻辑。替换你当前的vercel.json为以下内容：

{
  "routes": [
    {
      "src": "/(.*)",
      "dest": "/index.html"
    }
  ]
}

配置说明 #

• /(.*)：匹配所有路径（包括子路由、带参数的路由等）
• dest": "/index.html"：将所有匹配到的请求转发到SPA的入口文件，确保React Router能正确解析前端路由

原有配置的问题分析 #

1. 第一条规则{ "src": "/chat", "dest": "/Chat" }完全错误：Vercel的dest指向的是服务器上的物理文件路径，而非你的React组件路径，且大小写敏感的配置会导致匹配失败。
2. 第二条规则{ "src": "[^.]+", "dest": "/", "status": 200 }覆盖范围不全：[^.]+仅匹配不含点的路径，若后续出现带参数的子路由（如/chat/123）或包含特殊字符的路径，会无法匹配，且dest: "/"返回的是根路径内容而非入口文件，无法触发React Router的路由解析。

额外注意事项 #

• 确保vercel.json放在项目根目录（与package.json同级）
• 修改配置后，需在Vercel控制台手动触发重新部署，让新配置生效
• 静态资源（如图片、CSS、JS文件）会被Vercel自动优先处理，不会受此路由规则影响

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