Vercel部署React+Vite项目刷新页面出现404错误求助

问题根源 #

React Router属于前端路由，刷新页面时Vercel会尝试在服务器上寻找对应路径的静态文件，但单页应用（SPA）只有index.html这一个入口文件，因此返回404。你当前的vercel.json存在配置冗余，且路由规则写法错误，导致重定向逻辑未生效。

解决方案 #

1. 替换vercel.json配置 #

删除现有复杂配置，在项目根目录创建/修改vercel.json，使用以下最简配置：

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

该配置会将所有非静态资源的请求（如路由路径）重定向到index.html，交由React Router处理前端路由逻辑。

2. 清理冗余配置 #

你原配置中的@vercel/node构建规则完全多余——Vite构建的是纯静态站点，不需要Node.js Lambda运行环境，Vercel会自动识别Vite的构建流程，无需额外指定build命令、dist目录等参数。

3. 检查Vite基础路径配置 #

确保vite.config.js中的base字段配置正确（根域名部署时设为'/'即可）：

// vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  base: '/'
})

4. 重新部署 #

将修改后的代码推送到GitHub仓库，触发Vercel重新部署，刷新页面即可验证修复效果。

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