Vite 打包目录结构自定义配置小结
作者：没烦恼301
在Vite工程开发中,默认打包后的dist目录资源常集中在asset目录下,不利于资源管理,本文基于Rollup配置原理,本文就来介绍一下通过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 配置资源输出规则：
// 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 目录结构如下：
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 打包目录的精细化管理，提升项目资源组织的清晰度和可维护性。
到此这篇关于Vite 打包目录结构自定义配置小结的文章就介绍到这了,更多相关Vite 打包目录结构配置内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！