Vite 打包目錄結構自定義配置小結

更新時間：2025年08月29日 10:36:19 作者：沒煩惱301

在Vite工程開發(fā)中,默認打包后的dist目錄資源常集中在asset目錄下,不利于資源管理,本文基于Rollup配置原理,本文就來介紹一下通過Vite配置自定義打包目錄結構,感興趣的可以了解一下

一、實現(xiàn)原理

Vite 底層依賴 Rollup 進行打包，因此需通過 Vite 的 build.rollupOptions 配置項傳遞 Rollup 相關參數(shù)，核心通過 Rollup 的 output 配置控制資源輸出路徑：

entryFileNames：控制入口 JS 文件的輸出路徑
chunkFileNames：控制分包/懶加載生成的 JS chunk 文件路徑
assetFileNames：控制非 JS 資源（CSS、圖片、SVG 等）的輸出路徑

二、具體配置步驟

1. 基礎配置文件

在項目根目錄的 vite.config.js（或 vite.config.ts）中，通過 build.rollupOptions.output 配置資源輸出規(guī)則：

// 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 資源輸出配置（通過函數(shù)細分類型）
        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]';
        }
      }
    }
  }
});

2. 配置說明

（1）JS 資源分離

entryFileNames：將項目入口 JS 文件（如 main.js）輸出到 dist/js 目錄，命名格式為文件名.哈希值.js（哈希值用于緩存控制）。
chunkFileNames：將路由懶加載、代碼分割生成的 JS chunk 文件統(tǒng)一輸出到 dist/js 目錄，與入口 JS 集中管理。

（2）非 JS 資源細分

通過 assetFileNames 函數(shù)對資源類型進行判斷：

CSS 文件：匹配 .css 后綴，輸出到 dist/css 目錄。
圖片資源：匹配 png、jpg、svg等圖片后綴，輸出到 dist/images目錄。
其他資源：未匹配的資源（如字體、視頻等）默認輸出到 dist/asset 目錄。

（3）占位符說明

配置中使用的 Rollup 占位符含義：

[name]：資源原始文件名（不含后綴）
[hash]：基于文件內(nèi)容生成的哈希值（用于避免緩存問題）
[ext]：資源原始后綴名（含 .，如 .css、.png）

三、打包效果驗證

執(zhí)行 npm run build 打包后，dist 目錄結構如下：

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