Vite构建ReactJS应用部署Vercel后，刷新非首页路由出现404错误

问题原因 #

React路由属于前端路由，本地开发时Vite的开发服务器会自动把所有路由请求转发到index.html，由前端路由处理跳转逻辑。但Vercel作为静态托管平台，默认会尝试在服务器上寻找对应路径的物理文件（比如访问/login会找login.html），而单页应用（SPA）只有一个index.html，因此返回404错误。

解决方案 #

1. 添加Vercel路由重写配置

在项目根目录创建vercel.json文件，写入以下内容：

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

该配置会让Vercel将所有路径的请求都转发到index.html，交给React路由处理，刷新非首页路由时就能正常加载页面。

2. 确认Vite的base配置（按需设置）

如果你的应用部署在Vercel的子路径下（例如xxx.vercel.app/my-project），需要在vite.config.js/vite.config.ts中配置正确的base路径：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  base: '/my-project/' // 替换为你的实际子路径，根路径部署则用 '/'
});

根路径部署可省略此配置，或直接设为'/'。

验证步骤 #

1. 将vercel.json（若修改了vite配置则同时提交）推送到Git仓库
2. 触发Vercel重新部署
3. 访问非首页路由并刷新，确认页面正常加载

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