vuecli 正式环境和测试环境分配命令

有时我们项目分为uat环境、sit环境、生产环境 等几个环境，自动使用当前环境变量。

一般的做法都是写一个base.js 声明一些变量。那个环境需要哪个变量就把注释打开来，然后全局引用这个变量

 但是这样的话相对来说麻烦了点，并且作为一个资深程序员，这样写显得有点像小白

本着让别人看不懂的代码就是好代码的原则，我们可以使用模式和环境变量。以下为官方文档

模式和环境变量https://cli.vuejs.org/zh/guide/mode-and-env.html

看不懂官方文档的看下面

目前刚好有个项目，我拿来改造一下。目前的这个项目有一个测试环境有两个不同的URL，一个正式环境也对应两个不同的URL。

目前我的计划是弄出两个启动项目命令（一个启动测试环境--dev，一个启动正式环境--serve），两个打包命令（一个打包测试环境--bud，一个打包正式环境--build）。

npm run serve时会把process.env.NODE_ENV设置为development；

npm run build 时会把process.env.NODE_ENV设置为production；

所以我们只需创建个命令名称  然后在末尾加 --mode xxx

然后在创建对应的配置文件

 .env.bud

NODE_ENV=bud
VUE_APP_ENV=bud
VUE_APP_API_URL= 'http://xxx.xxxx.com/'
VUE_APP_PC_URL= 'http://xxx.xxxx.com/'

.env.dev

NODE_ENV=dev
VUE_APP_ENV=dev
VUE_APP_API_URL= 'http://xxx.xxxx.com/'
VUE_APP_PC_URL= 'http://xxx.xxxx.com/'

上面为我的测试环境的打包和启动配置文件

.env.development

NODE_ENV=development
VUE_APP_ENV=development
VUE_APP_API_URL= 'https://api.xxxx.net/'
VUE_APP_PC_URL= 'https://www.xxxx.net/'

.env.production

NODE_ENV=production
VUE_APP_ENV=production
VUE_APP_API_URL= 'https://api.xxxx.net/'
VUE_APP_PC_URL= 'https://www.xxxx.net/'

在项目中使用刚才我们的变量,

案例一、js文件使用

 案例二、vue文件中使用

data () {
    return {
      schoolurl: process.env.VUE_APP_API_URL
    }
  },

如下运行命令，我们就可以同时启动测试环境和正式环境了 

 这样我们就不需要去注释来注释去，每次运行和打包只需要运行相对应的命令就OK了