如何配置Vite创建的React应用在Node.js子路径运行？

Vite不支持Create React App的homepage字段或PUBLIC_URL环境变量，要实现子路径部署，需通过Vite自身的base配置控制资源基础路径，具体步骤如下：

1. 修改Vite配置文件 #

在项目根目录的vite.config.js（或vite.config.ts）中添加base配置项，指定子路径前缀：

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

export default defineConfig({
  plugins: [react()],
  base: '/reactapp/' // 对应服务器的子路径
});

2. 清理无效配置 #

• 移除index.html中手动添加的<base href="/reactapp/">标签（Vite的base配置会自动处理资源路径前缀，额外添加可能导致冲突）
• 删除package.json中的"homepage": "/reactapp"配置（Vite不识别该字段）
• 无需设置PUBLIC_URL环境变量

3. 重新构建并部署 #

1. 执行构建命令：

npm run build

此时构建产物（dist目录）中的资源路径会自动带上/reactapp/前缀，例如/reactapp/assets/main.xxx.js。

2. 将dist目录下的所有文件复制到服务器的public子文件夹中，保持Express的静态资源路由配置不变：

app.use("/reactapp", express.static("public"));

完成以上配置后，访问服务器的/reactapp路径即可正常加载React应用，无需手动修改构建后的文件。

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