Vite 打包目录结构自定义配置小结

// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        // 1. 入口 JS 文件输出配置
        entryFileNames: 'js/[name].[hash].js', 
        // 2. 分包/懒加载 JS 文件输出配置
        chunkFileNames: 'js/[name].[hash].js', 
        // 3. 非 JS 资源输出配置（通过函数细分类型）
        assetFileNames: (assetInfo) => {
          // 定义图片后缀列表
          const imgExts = ['png', 'jpg', 'jpeg', 'gif', 'svg', 'webp'];
          // 获取资源文件名
          const fileName = assetInfo.name || '';
          
          // 若为 CSS 文件，输出到 css 目录
          if (fileName.endsWith('.css')) {
            return 'css/[name].[hash].[ext]';
          }
          // 若为图片文件，输出到 images 目录
          if (imgExts.some(ext => fileName.endsWith(`.${ext}`))) {
            return 'images/[name].[hash].[ext]';
          }
          // 其他资源默认输出到 asset 目录
          return 'asset/[name].[hash].[ext]';
        }
      }
    }
  }
});

dist/
├─ js/                 # 所有 JS 资源
│  ├─ main.xxxx.js     # 入口 JS
│  └─ chunk.xxxx.js    # 分包 JS
├─ css/                # 所有 CSS 资源
│  └─ style.xxxx.css
├─ images/             # 所有图片资源
│  ├─ logo.xxxx.png
│  └─ icon.xxxx.svg
└─ asset/              # 其他资源
   └─ font.xxxx.ttf