vue-cli配置开发、测试、生产环境

 

场景描述：

为了在测试过程中，不用反复修改环境信息。xian

1.根目录创建.env.dev、.env.test、.env.pro文件(开发、测试、生产)

2.文件内容及字段说明

• NODE_ENV:可以设置为其他值，比如"test",但是打包后的目录结构和"production"不一样，所以还是设置为"production",通过"VUE_APP_MODE"变量来区分环境
• VUE_APP_MODE:线上测试环境
• VUE_APP_API_URL:api调用地址

3. .env.dev 内容

// dev环境环境标记 
VUE_APP_MODE=dev

NODE_ENV=development

// dev环境 url请求路径
VUE_APP_URL=http://192.168.0.193:7000

4. .env.prod 内容

// 生产环境环境标记 package.json用
VUE_APP_MODE=prod

NODE_ENV=production

// 生产环境 url请求路径
VUE_APP_URL=http://192.168.0.233:7000

5. .env.test 内容

// 生产环境环境标记 package.json用
VUE_APP_MODE=test

NODE_ENV=production

// 生产环境 url请求路径
VUE_APP_URL=http://192.168.0.233:7000

6. 修改package.json文件

        "buildDev": "vue-cli-service build --mode dev",
        "test": "vue-cli-service build --mode test",
        "buildProd": "vue-cli-service build --mode prod"

7.其他说明
再次说明一下为什么是用process.env.VUE_APP_MODE来判断，而不是用process.env.NODE_ENV，如果我们在.env.test文件中把NODE_ENV设置为test的话，那么打包出来的目录结构是有差异的，差异如下图