必须在 vite.config.ts 中配置 build.rollupoptions,该配置仅影响 vite build 阶段,开发环境不生效;支持 external、output、manualchunks 等 rollup 标准选项,但需注意避免覆盖 vite 内置插件和预设。

在 Vite 中,自定义 Rollup 打包参数主要通过 vite.config.ts(或 .js)中的 build.rollupOptions 配置项实现。Vite 底层使用 Rollup 进行生产构建,但开发服务器不走 Rollup,因此这些配置仅影响 vite build 阶段。
修改 rollupOptions 的基本写法
直接在 build 选项中嵌套 rollupOptions,它会透传给底层 Rollup 实例:
import { defineConfig } from 'vite'
export default defineConfig({
build: {
rollupOptions: {
// 这里写标准 Rollup 配置
external: ['vue', 'axios'],
output: {
globals: {
vue: 'Vue',
axios: 'axios'
}
}
}
}
})
常用可配置的 Rollup 选项
以下参数在 Vite 中基本都可用(部分受 Vite 内部插件约束,如 input 和 plugins 需谨慎覆盖):
Java项目代码review工具。分析Git变更+完整调用链路上下文,推断业务需求,进行多维度评分和分类汇总,生成完整PRD文档。包含细粒度Java代码审查清单(Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
- external:标记哪些模块不被打包进产物(例如 CDN 引入的库)
-
output.globals:配合
external,指定全局变量名,用于 UMD/iife 格式 -
output.manualChunks:手动拆分代码块(比
build.rollupOptions.output.chunkFileNames更常用) - output.entryFileNames / output.chunkFileNames / output.assetFileNames:控制文件命名规则
- onwarn:拦截 Rollup 警告(比如忽略特定循环依赖提示)
- plugins:追加或替换 Rollup 插件(注意:Vite 已内置部分插件,完全覆盖需小心)
手动分包与命名控制示例
比如你想把 lodash 单独抽成 vendor-lodash.js,并让业务代码用短哈希命名:
build: {
rollupOptions: {
output: {
entryFileNames: 'assets/[name]-[hash].js',
chunkFileNames: 'assets/chunks/[name]-[hash].js',
assetFileNames: 'assets/[name]-[hash].[ext]',
manualChunks: {
lodash: ['lodash'],
chart: ['echarts', 'vue-echarts']
}
}
}
}
注意事项和常见坑
Vite 对 Rollup 配置做了封装和预设,有些字段不能直接覆盖:
-
input默认是index.html,若要改成 JS 入口(如构建库),需配合build.lib使用,不能只改rollupOptions.input -
plugins若完整赋值会丢掉 Vite 自带的插件(如vue()、define),推荐用...config.plugins合并或使用build.plugins(Vite 4.3+ 支持) -
treeshake和minify等开关由 Vite 统一控制,不建议在rollupOptions中重复设置 - 开发时热更新、HMR 不经过 Rollup,所以
rollupOptions对vite dev无影响
不复杂但容易忽略细节,关键是理解 Vite 的构建阶段与 Rollup 的作用边界。
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南










