React Vite项目部署后页面导航及刷新出现404错误求助

问题原因 #

单页应用（SPA）的路由逻辑由前端React Router控制，本地开发时Vite的开发服务器会自动将所有路由请求 fallback 到index.html，但生产部署时，服务器收到/about这类子路由请求时，会尝试寻找对应物理文件，找不到就返回404。

解决方案 #

1. Vercel 平台配置 #

在项目根目录创建vercel.json文件，添加路由重写规则：

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

提交该文件后重新部署，服务器会将所有请求导向index.html，由前端路由处理。

2. Netlify 平台配置 #

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

/*    /index.html   200

Netlify会根据该配置，将所有请求重定向到index.html并返回200状态码。

3. 自定义服务器（如Nginx）配置 #

如果部署在自有Nginx服务器上，修改对应server块的配置：

location / {
  try_files $uri $uri/ /index.html;
}

这段配置会让Nginx先尝试访问请求的文件或目录，找不到则返回index.html。

4. 备选方案：使用HashRouter #

若不想配置服务器，可将React Router的BrowserRouter替换为HashRouter，此时路由会带上#（如/#/about），服务器仅处理根路径请求，路由逻辑完全由前端接管。但该方式会改变URL结构，需根据需求选择。

内容的提问来源于stack exchange，提问作者Muhammad Faeez Shabbir