如何配置Vite将多入口vanilla项目打包为指定目录结构？

1. 创建Vite配置文件
   在项目根目录新建vite.config.js，写入以下配置：

import { defineConfig } from 'vite'

export default defineConfig({
  build: {
    rollupOptions: {
      // 配置多入口，键名对应最终输出的目录名
      input: {
        A: './src/A/main.js',
        B: './src/B/main.js',
        C: './src/C/main.js'
      },
      output: {
        // 入口JS文件输出到对应目录下的main.js
        entryFileNames: '[name]/main.js',
        // 静态资源（如图片）输出到对应目录，保留原始文件名
        assetFileNames: '[name]/[originalname]',
        // 禁用自动代码拆分，避免生成额外chunk文件
        manualChunks: () => undefined
      }
    }
  }
})

2. 确保资源引入正确
   每个目录下的main.js需正确引入对应图片，例如src/A/main.js中添加：

import './images/a.jpg'
// 其他业务代码

3. 执行打包命令
   运行pnpm build，打包完成后dist目录的结构即为目标结构：

dist/
├── A
│   ├── a.jpg
│   └── main.js
├── B
│   ├── b.jpg
│   └── main.js
├── C
│   ├── c.jpg
│   └── main.js
└── index.html

配置说明 #

• input：定义多入口打包的入口文件，键名A/B/C对应最终输出的目录名称
• entryFileNames：指定入口JS的输出路径，[name]会替换为input中的键名，实现A/main.js这类输出
• assetFileNames：指定静态资源的输出规则，[name]关联入口键名，[originalname]保留资源原始文件名，确保图片进入对应目录
• manualChunks: () => undefined：禁用Vite默认的代码拆分逻辑，避免生成额外的公共chunk文件

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