Vite配置多入口及指定输出结构问题求助

你当前的配置核心问题在于用main.jsx作为构建入口，而Vite是基于HTML的构建工具，这会导致子应用的index.html无法被正确输出到对应目录，同时资源路径的配置也需要调整才能匹配期望的结构。

以下是修正后的父目录vite.config.js配置：

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

const apps = ['app1', 'app2'];

// 改为以每个子应用的index.html作为入口，适配Vite的HTML-first特性
const entries = apps.reduce((acc, app) => {
  acc[app] = resolve(__dirname, `${app}/index.html`);
  return acc;
}, {});

export default defineConfig({
  base: '', // 确保资源使用相对路径，避免前缀问题
  plugins: [react()],
  server: {
    host: 'localhost',
    port: 9015,
    open: true,
  },
  build: {
    emptyOutDir: true, // Vite 2.x+ 用这个替代旧的clean选项
    outDir: resolve(__dirname, 'dist'),
    rollupOptions: {
      input: entries,
      output: {
        // 入口JS输出到对应子应用目录下的build.js
        entryFileNames: '[name]/build.js',
        // 公共chunk（如果有）输出到对应子应用目录
        chunkFileNames: '[name]/[name].js',
        // 静态资源输出到对应子应用的assets目录，用hash避免缓存冲突
        assetFileNames: '[name]/assets/[hash][extname]',
        manualChunks: undefined, // 禁用自动拆分chunk，所有代码合并到build.js
      },
    },
  },
});

关键改动说明： #

1. 入口切换为index.html：Vite原生以HTML作为构建入口，这样会自动处理子应用的index.html打包输出，确保它被放到dist/[app]/目录下。
2. 调整资源输出路径：通过assetFileNames把CSS、字体、图片等资源统一放到对应子应用的assets目录下，用[hash]后缀可以避免浏览器缓存旧资源。
3. 替换clean为emptyOutDir：Vite 2.x版本后废弃了clean选项，改用emptyOutDir来清空输出目录。

额外说明： #

如果子应用各自的vite.config.js有独立配置需要复用，可以使用Vite提供的mergeConfig工具合并配置（需要异步处理，因为导入模块是异步操作），比如：

import { defineConfig, mergeConfig } from 'vite';

// 异步加载并合并子应用配置
async function getAppConfigs() {
  const configs = {};
  for (const app of apps) {
    const { default: appConfig } = await import(`./${app}/vite.config.js`);
    configs[app] = appConfig;
  }
  return configs;
}

export default defineConfig(async () => {
  const appConfigs = await getAppConfigs();
  // 这里可以根据需要合并主配置和子应用配置
  return {
    // 主配置内容...
  };
});

运行vite build后，dist目录结构就会和你期望的完全一致了。

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