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

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