vue cli3 区分开发环境，测试环境，正式环境

• 在根目录下新建 .env.xx (xx可以是自己取的用来区分这三个环境）
• 注意前缀的 " . " 别忘了

// 如：
.env.development     // 开发
.env.test			// 测试
.env.production		// 正式

• 编辑新建的文件
• 注意：全局变量仅除NODE_ENV和BASE_URL这两个保留变量外，其余自定义变量都需使用VUE_APP开头。
• .env文件里不允许存在注释 （这里只为了大家更好的阅读理解）

// env.development
NODE_ENV = 'development'
VUE_APP_ENV= 'development'

// env.test
// 测试环境和正式环境一样都是需要打包所以NODE_ENV都是'production'，
// VUE_APP_ENV是我们自己取的用来区分环境的变量，为了和正式环境打包完的dist区分，我们指定测试环境的输出目录outputDir	
NODE_ENV = 'production'
VUE_APP_ENV= 'test'
outputDir = 'test''		// 打包目录名

// env.production	
NODE_ENV = 'production'
VUE_APP_ENV= 'production'
outputDir = 'dist'		// 打包目录名

• 接下来我们就可以根据VUE_APP_ENV来区分不同环境

let BASE_URL = null
if(process.env.VUE_APP_ENV=='development'){
  console.log('开发环境')
  BASE_URL = 'https://www.development.com'
}else if(process.env.VUE_APP_ENV=='test'){
  console.log('测试环境')
  BASE_URL = 'https://www.test.com'
}else if(process.env.VUE_APP_ENV=='production'){
  console.log('正式环境')
  BASE_URL = 'https://www.production.com'
}

• 在vue.config.js设置或修改打包文件名称
• env.production是生产环境，.env.test是测试环境，两个文件的【NODE_ENV】都= ‘production’ 所以用另一个变量【VUE_APP_ENV】 来区分环境

module.exports = {
  // 根据不同环境输出文件目录
  outputDir: 'buildFile/'+ process.env.outputDir,
};

• 修改打包命令(packge.json中)

"build": "vue-cli-service build --mode production && vue-cli-service build --mode test",

• 现在当你执行完npm run build
• 你会发现，打包了2次
  -在buildFile文件分别生成dist和test文件夹
• 记得在.gitignore 文件，添加/test 这样上传代码就不会上传被打包好的test文件了

如果不区分测试和正式环境
我们不需要新建文件，直接根据process.env.NODE_ENV来区分
“production” 打包环境（测试和正式环境）
“development” 开发环境（本地）