1. 项目背景与需求分析
在大型前端项目中,我们经常会遇到这样的场景:同一套业务逻辑需要部署到多个不同的环境中,比如主站、子站点或不同客户定制版本。传统做法是为每个项目单独维护一套代码库,但这会导致维护成本成倍增加,任何功能修改都需要同步到多个仓库。
基于Vue CLI的环境变量机制,我们可以实现一套代码适配多套部署环境。具体到本文案例,需要实现以下目标:
- 同一套Vue3代码库
- 根据构建命令自动切换部署路径(/web/、/web1/、/web2/)
- 保持开发环境与生产环境配置隔离
- 最小化配置改动,不侵入业务代码
这种方案特别适合以下场景:
- 多租户SaaS平台的前端部署
- 同一产品的不同品牌定制版
- 需要区分测试/预发/生产环境的项目
需要模型API调用? 免费领10W Token,多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 环境配置详解
2.1 环境变量文件设计
Vue CLI使用.env文件来注入环境变量。我们创建了四个环境文件:
bash复制.env.development # 开发环境基础配置
.env.production # 生产环境基础配置
.env.web1 # web1项目专属配置
.env.web2 # web2项目专属配置
关键变量说明:
NODE_ENV: 标识当前环境(development/production)VUE_PUBLIC_PATH: 静态资源部署路径(CDN路径或子目录)VUE_APP_URL: API基础地址(示例中留空,实际项目必填)
注意:所有以
VUE_APP_开头的变量会被webpack静态嵌入到客户端包中
2.2 多环境工作原理
当执行vue-cli-service build --mode web1时:
- CLI会先加载
.env.production(因为NODE_ENV=production) - 然后合并
.env.web1中的同名变量 - 最终生成针对web1项目的生产环境配置
这种继承机制让我们可以:
- 在基础配置中定义公共变量
- 在子配置中覆盖特定参数
- 避免重复配置
3. 工程化配置
3.1 package.json脚本配置
json复制{
"scrip
