如何配置Vite + React多入口构建，使JS文件与对应HTML同目录？

我正在使用Vite搭配React进行多入口多输出构建，但需要将每个JS构建文件放在引用它的HTML文件所在的同一目录中——因为我使用的开发框架禁止访问/graphics或/dashboard以外的文件夹。

目前JS文件会生成在独立的/assets文件夹中。

当前vite.config.js配置 #

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

export default defineConfig({
  root: 'src',
  plugins: [
    react(),
  ],
  build: {
    rollupOptions: {
      input: {
        dashboard: resolve(__dirname, 'src/dashboard/index.html'),
        graphics: resolve(__dirname, 'src/graphics/index.html'),
      },
      output: {
        dashboard: resolve(__dirname, 'dashboard/index.html'),
        graphics: resolve(__dirname, 'graphics/index.html') 
      }
    },
  },
})

当前构建后目录结构 #

├── dashboard
│   └── index.html
│
├── graphics
│   └── index.html
└── assets
    ├── graphicsfile.js
    └── dashboardfile.js

期望的构建后目录结构 #

├── dashboard
│   ├── index.html
│   └── dashboardfile.js
│
└── graphics
    ├── index.html
    └── graphicsfile.js    

请问是否有办法实现这样的构建配置？

可以通过调整Vite的Rollup输出配置实现需求，以下是修改后的vite.config.js：

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

export default defineConfig({
  root: 'src',
  base: './', // 配置相对路径引用资源
  plugins: [react()],
  build: {
    outDir: '../', // 将构建产物输出到项目根目录（对应root为src的上级目录）
    assetsDir: '', // 取消默认的assets文件夹
    rollupOptions: {
      input: {
        dashboard: resolve(__dirname, 'src/dashboard/index.html'),
        graphics: resolve(__dirname, 'src/graphics/index.html'),
      },
      output: {
        // 指定入口JS文件的输出路径：[name]对应入口名称（dashboard/graphics）
        entryFileNames: '[name]/[name].js',
        // 禁用代码分割，确保每个入口只生成单独的JS文件（按需启用）
        manualChunks: undefined,
      },
    },
  },
});

关键配置说明 #

• base: './'：让HTML中的资源引用使用相对路径，确保能正确加载同一目录下的JS文件。
• build.outDir: '../'：因为root设为src，所以将输出目录指定为上级目录，直接把产物放到项目根目录的dashboard和graphics文件夹下。
• build.assetsDir: ''：取消默认的assets文件夹，避免资源被统一放到该目录。
• entryFileNames: '[name]/[name].js'：利用Rollup的占位符[name]匹配入口名称，将每个入口的JS文件输出到对应名称的目录下，和HTML文件同目录。
• manualChunks: undefined：禁用自动代码分割，防止生成额外的公共chunk文件；如果需要提取公共模块，可以自定义manualChunks规则。

补充说明 #

如果项目中还有图片、CSS等其他静态资源，可添加assetFileNames配置来统一放到对应目录：

output: {
  entryFileNames: '[name]/[name].js',
  assetFileNames: '[name]/[name].[ext]', // 其他资源也输出到对应入口目录
  manualChunks: undefined,
},

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