Vue 3 项目通过 vite.config.ts 的 build.rollupOptions.output 控制 Rollup 打包输出分类，使用 entryFileNames、chunkFileNames、assetFileNames 分别配置 JS 入口、异步块、静态资源路径；manualChunks 按依赖功能或体积（如 >200KB）拆分 vendor；组件库需启用 build.lib，external 排除 vue 并配置多格式 output；环境差异通过 mode 或 NODE_ENV 动态调整 sourcemap、minify 和 manualChunks。
Vue 3 项目默认使用 Vite，而 Vite 底层构建基于 Rollup，所以“配置 Rollup 打包输出分类”实际是通过 vite.config.ts 中的 build.rollupOptions.output 进行控制，不是单独写 rollup.config.js（除非你脱离 Vite、纯 Rollup 构建）。
明确输出目录与文件命名规则
通过 entryFileNames、chunkFileNames 和 assetFileNames 分别控制入口 JS、代码分割块、静态资源（如 CSS、字体、图片）的输出路径和命名：
-
入口 JS：如
main.js→ 配置entryFileNames: 'assets/js/[name]-[hash].js' -
异步 chunk（路由懒加载、动态 import）→ 配置
chunkFileNames: 'assets/js/chunk-[hash].js' -
CSS 文件：单独归到
assets/css/下 →assetFileNames: 'assets/[ext]/[name]-[hash].[ext]'，再配合正则匹配css后缀
手动分包（manualChunks）实现依赖分类
避免所有第三方库挤进一个 vendor.js，用 manualChunks 按功能或体积拆开：
vue-admin-change-reviewer
下载
审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。
- Vue 生态打包为
vue-vendor.js：'vue-vendor': ['vue', 'vue-router', 'pinia'] - UI 库独立成包：
'ui-vendor': ['element-plus', '@element-plus/icons-vue'] - 图表类大依赖单独拎出：
'echarts-vendor': ['echarts', 'echarts-gl'] - 可按体积阈值辅助判断：比如
node_modules下单个包 > 200KB 就值得单独分包
多格式输出（适用于组件库场景）
若项目是封装 Vue 组件库（非应用），需同时输出 ESM、CJS、UMD 等格式，此时需启用 build.lib 并配置 rollupOptions.external 排除 Vue：
立即学习“前端免费学习笔记（深入）”；
-
external: ['vue']确保 Vue 不被打包进去，由使用者提供 -
output.globals: { vue: 'Vue' }用于 UMD 模式下绑定全局变量 - 配合
output多目标输出（如[{ format: 'es', file: 'dist/index.es.js' }, { format: 'cjs', file: 'dist/index.cjs.js' }]）
区分开发与生产环境的输出结构
Rollup 本身不直接读取 NODE_ENV 控制输出结构，但可通过 Vite 的 mode 或自定义逻辑动态配置：
- 生产环境开启
sourcemap: true并输出到dist/.sourcemap/目录（用build.sourcemap控制） - 开发时可关闭
minify、禁用manualChunks，加快 HMR 响应 - 利用
process.env.NODE_ENV === 'production'在vite.config.ts中条件返回不同rollupOptions
