如何调整Vite构建输出结构，将files下的HTML直接输出至dist根目录？

问题描述 #

执行npm run build后，项目中files/目录下的1.html~4.html会被打包到dist/files/目录下，期望将这些文件直接输出到dist/根目录。

解决方案 #

修改项目根目录下的vite.config.js配置文件，通过自定义Rollup的入口配置来调整输出结构：

import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    rollupOptions: {
      // 明确指定所有需要打包的HTML入口文件
      input: {
        index: './index.html',
        '1': './files/1.html',
        '2': './files/2.html',
        '3': './files/3.html',
        '4': './files/4.html'
      }
    }
  }
});

原理说明 #

• Vite默认会跟随源文件的目录结构生成对应输出路径，因此files/下的文件会被输出到dist/files/中。
• 通过在rollupOptions.input中直接指定每个HTML文件的入口，并自定义输出文件名（比如'1': './files/1.html'表示将files/1.html打包后输出为dist/1.html），即可让目标文件直接输出到dist根目录，同时保留index.html的正常输出结构。

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