基于React+Vite+TS配置双入口打包，实现单文件夹单HTML

你之前的配置问题在于：output数组会将所有入口资源重复输出到每个指定目录中，导致两个页面的文件混在一起，无法实现各自独立的子目录结构。

以下是满足需求的配置：

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

export default defineConfig({
  plugins: [react()],
  build: {
    emptyOutDir: true, // 每次构建清空dist目录
    rollupOptions: {
      input: {
        // 给入口指定带子目录的键名，Rollup会自动创建对应目录
        'external/index_external': resolve(__dirname, 'index_external.html'),
        'internal/index_internal': resolve(__dirname, 'index_internal.html'),
      },
      output: {
        // 可选：将资源统一放到对应子目录的assets下，结构更清晰
        entryFileNames: '[dir]/assets/[name]-[hash].js',
        chunkFileNames: '[dir]/assets/[name]-[hash].js',
        assetFileNames: '[dir]/assets/[name]-[hash].[ext]',
      },
    },
  },
});

配置关键点说明 #

• 入口键名设计：通过input的键名指定子目录路径（如external/index_external），Rollup会自动在dist下创建external和internal目录，并将对应的HTML文件输出到该目录下。
• 资源路径配置：output中的命名规则将JS、CSS等资源放到对应子目录的assets文件夹，同时添加哈希值实现缓存更新。
• 清空旧目录：emptyOutDir: true确保每次构建时清理dist目录，避免残留旧文件。

执行npm run build后，dist目录结构会完全符合你的期望：

dist
├── external
│   ├── assets
│   │   ├── index_external-xxxx.js
│   │   └── index_external-xxxx.css
│   └── index_external.html
└── internal
    ├── assets
    │   ├── index_internal-xxxx.js
    │   └── index_internal-xxxx.css
    └── index_internal.html

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