如何将React项目集成到现有jQuery/原生JS项目并统一访问路径

步骤1：调整React仪表盘的基础路径配置 #

这一步是为了让React项目的静态资源、路由都默认带上/dashboard前缀，避免资源加载404：

• 若使用Create React App（CRA）搭建项目：在package.json中新增字段 "homepage": "/dashboard"
• 若使用Vite搭建项目：在vite.config.js的defineConfig配置项中新增 base: '/dashboard/'
  配置完成后重新执行构建命令（npm run build或对应自定义构建命令），拿到构建后的产包文件。

步骤2：整理部署目录结构 #

将主站文件、React仪表盘文件按以下结构放在服务器的根目录下即可：

服务器根目录（对应example.com访问的根路径）
├── index.html # 主站入口文件
├── css/ # 主站样式文件夹
├── js/ # 主站脚本文件夹（包含jQuery相关依赖）
├── images/ # 主站资源文件夹
├── ... # 主站其余所有文件
└── dashboard/ # 新建文件夹，放入React构建产包的所有文件
    ├── index.html # 仪表盘入口文件
    ├── static/ # React构建生成的静态资源文件夹
    └── ... # 仪表盘其余构建文件

步骤3：配置服务器路由重写规则 #

因为React是单页应用，必须配置路由重写才能避免直接刷新/dashboard下的子路由出现404问题，不同服务端的配置如下：

Nginx配置 #

在站点对应的server配置块中添加以下规则，原有主站的配置不需要修改：

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

Apache配置 #

在服务器根目录的.htaccess文件中添加以下规则：

RewriteEngine On
RewriteBase /dashboard/
RewriteRule ^dashboard/index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /dashboard/index.html [L]

如果使用其他托管服务，只要配置对应规则：所有/dashboard开头的请求如果匹配不到静态资源，就返回/dashboard/index.html即可。

步骤4：功能验证 #

部署完成后依次测试：

• 访问example.com，确认主站所有页面、功能正常运行
• 访问example.com/dashboard，确认仪表盘正常加载，刷新子路由、资源引用都无404错误

注意事项 #

• 如果React项目内有写死的绝对路径静态资源引用，需要统一加上/dashboard前缀，或者改为相对路径引用
• 之前针对子域名配置的跨域规则可以移除，现在二者同域不会有跨域问题

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