如何在Vite项目构建时自定义多入口HTML的输出路径？

你的现有配置会把donate入口打包成dist/donate.html，要实现src/pages/index/index.html输出到dist/index.html、src/pages/donate/index.html输出到dist/pages/donate/index.html的需求，有两种简单的调整方式：

方案一：直接修改入口键名 #

Rollup会将input对象的键名作为输出文件的相对路径（基于outDir），直接把键名设为目标路径即可：

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

const root = resolve(__dirname, 'src');
const outDir = resolve(__dirname, 'dist');

export default defineConfig({
  root,
  build: {
    outDir,
    emptyOutDir: true,
    rollupOptions: {
      input: {
        // 对应输出 dist/index.html
        index: resolve(root, 'pages/index/index.html'),
        // 对应输出 dist/pages/donate/index.html
        'pages/donate/index': resolve(root, 'pages/donate/index.html')
      }
    }
  }
})

方案二：通过output配置自定义路径 #

如果需要更灵活的路径控制，可以在rollupOptions.output里用自定义函数指定每个入口的输出路径：

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

const root = resolve(__dirname, 'src');
const outDir = resolve(__dirname, 'dist');

export default defineConfig({
  root,
  build: {
    outDir,
    emptyOutDir: true,
    rollupOptions: {
      input: {
        main: resolve(root, 'pages/index/index.html'),
        donate: resolve(root, 'pages/donate/index.html')
      },
      output: {
        entryFileNames: (chunk) => {
          switch(chunk.name) {
            case 'main':
              return 'index.html';
            case 'donate':
              return 'pages/donate/index.html';
            default:
              return '[name].html';
          }
        }
      }
    }
  }
})

配置完成后，执行npm run build，dist目录下就会生成你需要的文件结构：

• dist/index.html
• dist/pages/donate/index.html

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