在 Vite 工程開發(fā)中，默認(rèn)打包后的 dist 目錄資源常集中在 asset 目錄下，不利于資源管理。本文基于 Rollup 配置原理，詳細(xì)介紹如何通過 Vite 配置自定義打包目錄結(jié)構(gòu)，實現(xiàn) JS、CSS、圖片等資源的分類存放。

一、實現(xiàn)原理

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

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

二、具體配置步驟

1. 基礎(chǔ)配置文件

在項目根目錄的 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ù)細(xì)分類型）
        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]';
          }
          // 其他資源默認(rèn)輸出到 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 資源細(xì)分

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

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

（3）占位符說明

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

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

三、打包效果驗證

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

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

四、注意事項

1. 配置兼容性：確保 Vite 版本 ≥ 2.0，Rollup 配置語法隨版本可能略有差異，建議參考對應(yīng)版本官方文檔。
2. 資源類型擴(kuò)展：如需添加更多資源類型（如字體 woff2），可在 imgExts 或判斷邏輯中擴(kuò)展。
3. 哈希值必要性：保留 [hash] 占位符可有效解決瀏覽器緩存問題，避免線上資源更新后用戶無法獲取最新內(nèi)容。

通過上述配置，可實現(xiàn) Vite 打包目錄的精細(xì)化管理，提升項目資源組織的清晰度和可維護(hù)性。

到此這篇關(guān)于Vite 打包目錄結(jié)構(gòu)自定義配置小結(jié)的文章就介紹到這了,更多相關(guān)Vite 打包目錄結(jié)構(gòu)配置內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論