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

本文主要是介绍Vite 打包目录结构自定义配置小结，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

《Vite打包目录结构自定义配置小结》在Vite工程开发中,默认打包后的dist目录资源常集中在asset目录下,不利于资源管理,本文基于Rollup配置原理,本文就来介绍一下通过Vite配置自定义...

一、实现原理

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 资源输出配置（通python过函数细分类型）
        assetFileNames: (assetInfo) => {
          // 定义图片后缀列表
          const imgExts = ['png', 'jpg', 'jpeg', 'gif', 'svg', 'webpChina编程'];
          // 获取资源文件名
          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]';
        }
编程      }
    }
  }
});android

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]：资源原始文件名（不含编程China编程后缀）
[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