Vite多入口打包配置：如何将各入口资源归置到对应文件夹？

Vite完全支持这种每个入口的HTML、脚本、样式及资源都存放在独立文件夹的打包策略，只需调整Rollup的输出配置即可实现目标结构。

修改后的vite.config.ts配置 #

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { fileURLToPath, URL } from 'node:url'

export default defineConfig({
  plugins: [vue()],
  build: {
    rollupOptions: {
      input: {
        order: fileURLToPath(
          new URL("./src/views/Order/index.html", import.meta.url)
        ),
        catalog: fileURLToPath(
          new URL("./src/views/Catalog/index.html", import.meta.url)
        ),
        shops: fileURLToPath(
          new URL("./src/views/Shops/index.html", import.meta.url)
        ),
      },
      output: {
        dir: "dist-chunk",
        // 入口JS文件输出到对应入口文件夹
        entryFileNames: '[name]/[name].js',
        // 代码分割的chunk文件输出到对应入口文件夹（带hash防缓存）
        chunkFileNames: '[name]/[name]-[hash].js',
        // 样式、图片等资源文件输出到对应入口文件夹（带hash防缓存）
        assetFileNames: '[name]/[name]-[hash].[ext]',
      },
    },
  },
})

关键配置说明 #

• entryFileNames：控制入口JavaScript文件的输出路径，[name]会自动替换为你定义的入口名称（如order、catalog），最终生成order/order.js这类路径。
• chunkFileNames：处理代码分割产生的异步chunk文件，确保它们也存放在对应入口的文件夹下，添加[hash]是为了解决浏览器缓存问题。
• assetFileNames：将样式、图片、字体等静态资源统一输出到对应入口的文件夹，同样通过[hash]避免缓存冲突。

打包完成后，你会得到如下结构：

dist-chunk/
├── order/
│   ├── index.html
│   ├── order.js
│   ├── order-[hash].css
│   └── order-[hash].png（如果有资源）
├── catalog/
│   ├── index.html
│   ├── catalog.js
│   └── catalog-[hash].css
└── shops/
    ├── index.html
    ├── shops.js
    └── shops-[hash].css

内容的提问来源于stack exchange，提问作者Евгений Петров