Vite.js构建：多配置文件下如何将自定义入口输出为index.html

直接修改rollupOptions.input为对象格式即可，不用在output里浪费时间——因为Vite对HTML入口的处理逻辑特殊，Rollup的output配置不会覆盖HTML的输出文件名。

具体配置示例 #

针对app1.html的vite1.config.ts：

import { defineConfig } from 'vite';
import { resolve } from 'path';

export default defineConfig({
  build: {
    rollupOptions: {
      // 把input从字符串改成对象，键名设为你要输出的文件名（这里是index）
      input: {
        index: resolve(__dirname, 'app1.html'),
      },
    },
  },
});

对应app2.html的vite2.config.ts只需替换input里的文件路径：

import { defineConfig } from 'vite';
import { resolve } from 'path';

export default defineConfig({
  build: {
    rollupOptions: {
      input: {
        index: resolve(__dirname, 'app2.html'),
      },
    },
  },
});

构建命令 #

分别执行以下命令，就能得到dist目录下的index.html：

# 构建app1，输出dist/index.html
vite build --config vite1.config.ts

# 构建app2，输出dist/index.html
vite build --config vite2.config.ts

为什么之前的output配置没用？ #

Vite是通过专属HTML插件处理入口HTML文件的，Rollup的output配置仅对JS/CSS等chunk生效，无法修改HTML的输出文件名。用对象格式的input直接指定输出文件名，是Vite官方支持的有效方式。

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