使用Vite构建的React项目生产环境路由异常问题求助

问题原因 #

开发模式下Vite的开发服务器会自动处理SPA路由的跳转逻辑，但生产构建后是静态文件，服务器收到/onas这类路由请求时，会默认去寻找对应路径的文件，而这些文件实际不存在，所以返回404。必须让服务器把所有路由请求都转发到index.html，由React-Router在前端处理路由匹配。

解决方案 #

1. Vite基础配置（按需设置） #

如果网站部署在根域名（如https://xxx.netlify.app），无需额外设置base；如果部署在子路径（如https://xxx.netlify.app/my-site），需要在vite.config.js中配置base：

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

export default defineConfig({
  plugins: [react()],
  // 子路径部署时设置，根路径可省略
  // base: '/my-site/',
});

2. 托管平台重写规则配置 #

不同平台需要配置将所有请求指向index.html，以下是常见平台的配置方式：

Netlify

在项目根目录创建_redirects文件，内容如下：

/*    /index.html   200

或创建netlify.toml文件：

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

Vercel

在项目根目录创建vercel.json文件：

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

自建Nginx服务器

修改Nginx配置文件，添加路由重写规则：

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

3. 路由配置验证 #

你的App.js路由配置本身没有问题，无需调整顺序。确保Router组件使用的是react-router-dom中的BrowserRouter（如果使用哈希路由HashRouter不会出现此问题，但URL会带有#）。

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