基于Vite构建React项目实现多输出及脚本分离的需求咨询

项目目录确认 #

先确保你的项目目录结构符合预期（根目录main.ts仅用于本地开发，打包时忽略）：

项目根目录
├── authentication/
│   ├── main.ts          # React应用入口
│   ├── ...（React组件、样式文件）
├── home/
│   ├── main.ts          # TypeScript脚本入口
│   ├── ...（TS业务文件）
├── main.ts              # 仅本地开发用，打包忽略
├── index.html           # 本地开发入口页面
├── public/
│   ├── ...（静态资源）
└── vite.config.ts

Vite配置实现 #

修改vite.config.ts，通过多入口配置和输出路径映射，实现分模块构建：

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

export default defineConfig({
  plugins: [react()], // React插件自动处理authentication下的React文件，不影响home模块的TS脚本
  build: {
    rollupOptions: {
      // 指定打包入口，排除根目录main.ts
      input: {
        authentication: './authentication/main.ts',
        home: './home/main.ts',
      },
      output: {
        // 配置入口JS的输出路径
        entryFileNames: (chunk) => {
          switch (chunk.name) {
            case 'authentication':
              return 'authentication/index.js';
            case 'home':
              return 'home/index.js';
            default:
              return '[name].js';
          }
        },
        // 配置CSS资源的输出路径（仅authentication模块会生成CSS）
        assetFileNames: (asset) => {
          if (asset.name?.endsWith('.css')) {
            return 'authentication/index.css';
          }
          return 'assets/[name].[hash][extname]'; // 其他静态资源统一放assets目录
        },
      },
    },
  },
  // 本地开发时使用根目录的index.html，对应根目录main.ts
  server: {
    open: true,
  },
});

关键说明 #

• 多入口配置：通过build.rollupOptions.input明确指定两个模块的入口，完全跳过根目录main.ts，打包时不会处理它。
• 输出路径映射：通过entryFileNames和assetFileNames分别控制JS和CSS文件的输出目录，确保产物结构符合你的要求。
• React插件作用范围：@vitejs/plugin-react只会处理含React语法的文件，home模块的纯TS脚本不会被额外处理，打包后仅输出单JS文件。

验证构建 #

执行打包命令：

npm run build

最终生成的dist目录结构如下：

/dist
├── authentication/
│   ├── index.js
│   ├── index.css
├── home/
│   ├── index.js
├── assets/（如有其他静态资源）
└── ...（public目录下的静态文件）

额外提示 #

• 若未安装React插件，执行npm install @vitejs/plugin-react --save-dev完成安装。
• 本地开发时，Vite会自动加载根目录的index.html和main.ts，正常运行React应用，不影响打包逻辑。

内容的提问来源于stack exchange，提问作者Wilmer Rodríguez S