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

在 Vite 工程开发中，默认打包后的 dist 目录资源常集中在 asset 目录下，不利于资源管理。本文基于 Rollup 配置原理，详细介绍如何通过 Vite 配置自定义打包目录结构，实现 JS、CSS、图片等资源的分类存放。

一、实现原理

Vite 底层依赖 Rollup 进行打包，因此需通过 Vite 的 build.rollupOptions 配置项传递 Rollup 相关参数，核心通过 Rollup 的 output 配置控制资源输出路径：

entryFileNames：控制入口 JS 文件的输出路径
chunkFileNames：控制分包/懒加载生成的 JS chunk 文件路径
assetFileNames：控制非 JS 资源（CSS、图片、SVG 等）的输出路径

二、具体配置步骤

1. 基础配置文件

在项目根目录的 vite.config.js（或 vite.config.ts）中，通过 build.rollupOptions.output 配置资源输出规则：

javascript 复制代码

// 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]';
        }
      }
    }
  }
});

2. 配置说明

（1）JS 资源分离

entryFileNames：将项目入口 JS 文件（如 main.js）输出到 dist/js 目录，命名格式为文件名.哈希值.js（哈希值用于缓存控制）。
chunkFileNames：将路由懒加载、代码分割生成的 JS chunk 文件统一输出到 dist/js 目录，与入口 JS 集中管理。

（2）非 JS 资源细分

通过 assetFileNames 函数对资源类型进行判断：

CSS 文件：匹配 .css 后缀，输出到 dist/css 目录。
图片资源：匹配 png、jpg、svg等图片后缀，输出到 dist/images目录。
其他资源：未匹配的资源（如字体、视频等）默认输出到 dist/asset 目录。

（3）占位符说明

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

$name$ ：资源原始文件名（不含后缀）
$hash$ ：基于文件内容生成的哈希值（用于避免缓存问题）
$ext$ ：资源原始后缀名（含 .，如 .css、.png）

三、打包效果验证

执行 npm run build 打包后，dist 目录结构如下：

bash 复制代码

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

四、注意事项

配置兼容性：确保 Vite 版本 ≥ 2.0，Rollup 配置语法随版本可能略有差异，建议参考对应版本官方文档。
资源类型扩展：如需添加更多资源类型（如字体 woff2），可在 imgExts 或判断逻辑中扩展。
哈希值必要性：保留 $hash$ 占位符可有效解决浏览器缓存问题，避免线上资源更新后用户无法获取最新内容。

通过上述配置，可实现 Vite 打包目录的精细化管理，提升项目资源组织的清晰度和可维护性。