核心思路是用环境变量控制分块逻辑并结合manualchunks动态分包：1.通过vite_target等变量区分h5/pc模式；2.在vite.config.js中读取变量并按平台拆分ui库；3.用动态导入实现功能级按需加载；4.通过调试工具验证分包结果。
核心思路是：用环境变量控制分块逻辑，再结合 manualChunks 动态决定哪些模块进哪个包。不是简单地“读取变量然后 if 判断”，而是把变量作为策略开关，让打包行为随构建模式自动切换。
1. 先定义好区分环境的变量
在项目根目录创建不同模式的环境文件：
-
.env.h5：写入VITE_TARGET=h5、VITE_UI_LIB=vant -
.env.pc：写入VITE_TARGET=pc、VITE_UI_LIB=element-plus -
.env.production：通用生产配置（如 API 地址、标题等）
注意：所有变量必须以 VITE_ 开头，才能被注入到客户端代码中；而构建时真正用于控制分包逻辑的变量，建议额外加前缀（如 VITE_BUILD_）避免混淆。
2. 在 vite.config.js 中读取并响应变量
利用 Vite 的配置函数式写法，在 defineConfig(({ command, mode }) => { ... }) 中加载对应环境变量：
import { defineConfig, loadEnv } from 'vite'
import { resolve } from 'path'
export default defineConfig(({ command, mode }) => {
const env = loadEnv(mode, process.cwd(), '')
const target = env.VITE_TARGET || 'web'
return {
build: {
rollupOptions: {
output: {
manualChunks(id) {
// 按目标平台拆 UI 库
if (id.includes('node_modules/element-plus')) {
return target === 'pc' ? 'ui-pc' : 'vendor'
}
if (id.includes('node_modules/vant')) {
return target === 'h5' ? 'ui-h5' : 'vendor'
}
// 公共依赖统一进 vendor
if (id.includes('node_modules')) {
return 'vendor'
}
}
}
}
}
}
})
这样，执行 vite build --mode h5 时，vant 进 ui-h5.js，element-plus 被忽略（不被打包）；反之亦然。
3. 进阶：按环境动态排除/包含模块
如果某些模块只在特定环境下存在（比如 PC 端有 Excel 导出功能，H5 不需要），可在入口逻辑里配合动态导入 + 环境判断：
- 入口文件（如
main.ts）中不直接import条件性模块 - 改用
if (import.meta.env.VITE_TARGET === 'pc')包裹import('./utils/exportExcel.ts') - Rollup 会自动为该
import()创建独立 chunk，且仅出现在对应构建产物中
这种写法比纯配置更灵活，适合功能级差异，也天然支持按需加载。
4. 验证与调试技巧
打包后检查 dist/assets/ 目录下的 chunk 文件名和内容：
- 运行
vite build --mode h5 --debug查看详细 chunk 分析日志 - 打开生成的
index.html，确认 script 标签是否只引入了ui-h5.js和vendor.js - 用
rollup-plugin-visualizer插件生成依赖图谱，直观对比不同模式的 chunk 组成
不复杂但容易忽略：环境变量必须在 loadEnv 阶段就生效，不能等到组件里才读 —— 分块发生在构建早期，属于 Rollup 编译阶段行为。
