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 函数识别并分类：
- 当
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属性，建议升级以获得更好类型提示
