vite 中需配置 build.rollupoptions.output 的 entryfilenames、chunkfilenames 和 assetfilenames 三个字段实现资源分目录输出：js 入口与 chunk 统一至 js/，css 通过 assetfilenames 判断 type === 'css' 输出到 css/，图片等静态资源按扩展名归入 img/ 或 svg/ 等子目录。

在 Vite 中，要将打包产物按 JS、CSS、Images 等类型分目录输出（如 js/、css/、img/），核心是配置 build.rollupOptions.output 下的三个关键字段：entryFileNames、chunkFileNames 和 assetFileNames。Vite 底层使用 Rollup 打包，这些选项直接透传给 Rollup 的 output 配置。

明确指定 JS 文件输出路径

JS 入口文件和代码分割块统一归入 js/ 目录：

• entryFileNames: 'js/[name].[hash].js' —— 控制主入口（如 index.js）输出到 js/ 下
• chunkFileNames: 'js/[name].[hash].js' —— 控制动态导入、异步路由等生成的 chunk 文件也落在 js/

让 CSS 单独输出到 css/ 目录

CSS 不是默认独立输出的，需通过 assetFileNames 函数识别并分类：

Comprehensive Three.js 3D graphics reference

详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。

下载

• 当 assetInfo.name 以 .css 结尾时，返回 'css/[name].[hash].css'
• 也可结合 assetInfo.type === 'css' 判断更可靠（Rollup 会为 CSS 资源标记 type）

示例写法：

assetFileNames: (assetInfo) => {
  if (assetInfo.type === 'css') return 'css/[name].[hash].css';
  // 后续处理图片等其他资源
  return '[ext]/[name].[hash].[ext]';
}

图片等静态资源归入 img/ 或对应子目录

对常见图片后缀做判断，统一导向 img/：

• 检查 assetInfo.name 或 assetInfo.fileName 的扩展名（如 .png、.jpg、.webp）
• 匹配后返回 'img/[name].[hash].[ext]'；SVG 可单独设为 'svg/[name].[hash].svg'
• 注意：Vite 2.9+ 中 assetInfo 提供 source 和 type，但扩展名仍推荐用 assetInfo.name.split('.').pop() 或正则提取

补充说明与常见避坑点

实际配置中还需注意：

• build.assetsDir 是 Vite 自带的公共资源目录前缀（默认 assets），它只影响未被 assetFileNames 拦截的资源；一旦你自定义了 assetFileNames，它就完全接管路径逻辑，assetsDir 不再生效
• 确保 outDir（如 'dist'）是干净的，避免旧文件干扰结构
• 如果用了 manualChunks，其产出的 JS 仍由 chunkFileNames 控制，不影响分类逻辑
• Vite 5.4+ 对 assetFileNames 支持更稳定的 assetInfo 属性，建议升级以获得更好类型提示

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！