持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第1天，点击查看活动详情
公司的项目是基于vue2搭建的。
之前一直是采用一个.env文件来存储变量，然后在打包的时候修改.env文件中对应的变量的值。
但是这样做现阶段有两个小问题：
（1）：现阶段只需要修改一个值，如果以后需要修改的值多了，可能会造成不便。
（2）：项目是托管在git上的，每次修改.env并提交之后，项目组其他成员在更新代码之后，可能会造成报错。团队协作不是很友好。
考量了一下，还是决定摒弃现有的.env使用方式。改用官方推荐的不同环境对应不同.env文件的方法。
使用.env文件之间，我们需要在项目中安装插件：process
npm install process
目前.env文件中内容如下：
# 调用：process.env.VUE_APP_UPLOAD_FILE_URL
NODE_ENV = 'local'
# 开发模式 本地:local 生产:production 测试:develop
VUE_APP_ENV_MODE=production
#系统域名
VUE_APP_DOMAIN_URL=https://guanchao.site
如上边所示：每次打包都是修改VUE_APP_ENV_MODE的值，每个值代表的意思，上边都有注释。
那我们该如何操作呢？
我们先创建两个文件分别为.env.dev、.env.production，如下图所示：
.env文件内容在上边已给出，这里不在重复展示
.env.dev
# 调用：process.env.VUE_APP_UPLOAD_FILE_URL
NODE_ENV = 'development'
# 开发模式 本地:local 生产:production 测试:develop
VUE_APP_ENV_MODE=develop
#系统域名
VUE_APP_DOMAIN_URL= https://guanchao.site
.env.production
# 调用：process.env.VUE_APP_UPLOAD_FILE_URL
NODE_ENV = 'production'
# 开发模式 本地:local 生产:production 测试:develop
VUE_APP_ENV_MODE=production
#系统域名
VUE_APP_DOMAIN_URL= https://guanchao.site
接下来，我们在package.json文件中新增两条命令：
"dev": "vue-cli-service serve --mode dev",
"production": "vue-cli-service serve --mode production"
放在如下图所示的位置中：
到这里，基本配置就完成了，那么我们如何测试配置是否成功呢？
在main.js中添加如下代码：
console.log(process.env.NODE_ENV)
效果如下图所示：即说明配置成功：
然后我们使用vue ui 开启vue项目管理器，打开项目，我们发现，多了两个操作命令：
这就是我们上边在package.json中添加的命令。
其实，到这里也就该完事了，但是我突然想到了一个小问题：
到现在为止，好像都是再说在本地启动项目的时候，那我如何在打包的时候应用呢？
其实也很简单
点击build页面中的参数按钮。如下图所示：
弹出弹窗如下图所示：
我们可以选择环境，development与production来打包。
我比较习惯使用 vue ui的图形界面管理器。
有好的建议，请在下方输入你的评论。
欢迎访问个人博客 guanchao.site
欢迎访问我的小程序：打开微信->发现->小程序->搜索“时间里的”
