Vite 控制打包目录结构

一、前言

在前端项目构建中，合理的静态资源目录结构对于项目维护和部署都至关重要。本文将详细介绍如何使用 Vite 的构建配置，实现以下打包目标：

• 📁 图片文件 → /dist/img/
• 📂 JS 文件 → /dist/js/
• 🎥 视频文件 → /dist/video/
• 🎵 音频文件 → /dist/audio/
• 🖌️ 字体文件 → /dist/font/
• 🎨 CSS 文件 → /dist/css/

二、配置详解

2.1、完整配置方案

// vite.config.ts
import { defineConfig } from 'vite'

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        // 控制代码分割后的 chunk 文件名
        chunkFileNames: 'js/[name]-[hash].js',
        // 控制入口文件文件名
        entryFileNames: 'js/[name]-[hash].js',
        // 静态资源分类处理（核心配置）
        assetFileNames: (chunkInfo) => {
          const ext = chunkInfo.name?.split('.').pop() || ''
          const baseName = chunkInfo.name?.split('.').shift() || ''

          // CSS 文件处理
          if (ext === 'css') {
            return 'css/[name]-[hash].[ext]'
          }

          // 字体文件处理
          const fontExt = ['.ttf', '.otf', '.woff', '.woff2', '.eot']
          if (fontExt.includes(`.${ext}`.toLowerCase())) {
            return `font/${baseName}-[hash].[ext]`
          }

          // 图片文件处理
          const imgExt = ['.png', '.jpg', '.jpeg', '.gif', '.webp', '.svg']
          if (imgExt.includes(`.${ext}`.toLowerCase())) {
            return `img/${baseName}-[hash].[ext]`
          }

          // 视频文件处理
          const videoExt = ['.mp4', '.avi', '.wmv', '.ram', '.mpg', '.mpeg', '.m3u8']
          if (videoExt.includes(`.${ext}`.toLowerCase())) {
            return `video/${baseName}-[hash].[ext]`
          }

          // 音频文件处理
          const audioExt = ['.mp3', '.flac', '.wav', '.aac', '.ape', '.m4a']
          if (audioExt.includes(`.${ext}`.toLowerCase())) {
            return `audio/${baseName}-[hash].[ext]`
          }

          // 其他未分类资源
          return 'assets/[name]-[hash].[ext]'
        },
      },
    },
  },
})

2.2、配置注意事项

• 哈希值的作用
  • [hash] 会根据文件内容生成唯一标识，确保文件更新后能正确刷新缓存
  • 推荐保留哈希值，特别是在生产环境构建时
• 文件名处理技巧
  • 使用 split() 方法分离文件名和扩展名更可靠
  • 通过 toLowerCase() 统一处理大小写问题
  • baseName 变量可保留原始文件名（不含扩展名）
• 扩展名匹配优化
  • 添加完整的扩展名前缀 .（如 .png 而非 png）
  • 使用数组的 includes 方法替代 endsWith 更高效
• SVG 文件处理
  • 根据需要可将 SVG 单独分类（示例归入图片类）
  • 如需单独处理可新增 svg 目录分类

三、效果验证

执行构建命令后检查 dist 目录结构

pnpm build

预期生成结构

dist/
├─ img/
│  └─ logo-3a7f5800.png
├─ js/
│  ├─ main-4d5f6c7a.js
│  └─ vendor-1b2c3d4e.js
├─ video/
│  └─ intro-5e6f7g8h.mp4
├─ css/
│  └─ style-9i8u7y6t.css
└─ font/
   └─ iconfont-a1b2c3d4.woff2

四、总结

通过合理配置 Vite 的打包策略，我们可以实现：

• ✅ 清晰的目录结构
• ✅ 自动化的缓存管理
• ✅ 优化的资源加载效率

建议根据实际项目需求调整分类策略，在保持结构清晰的同时，注意不要过度细分目录层次。对于大型项目，推荐将资源配置方案与部署方案（如 CDN 路径配置）结合设计。