vue-cli3配置不同环境下的baseUrl和不同环境下的一些参数【生产环境、开发环境、测试环境】

1.在与package.json的同级目录下创建三个文件.env.uat / .env.development / .env.production【用来判断不同的环境】

！！！注意自定义变量一定要以VUE_APP_开头

.env.uat

NODE_ENV=production
VUE_APP_BASE_API=https://www.yihuisoft.com/testAppBiz
VUE_APP_ENV=uat

.env.development

VUE_APP_BASE_API=https://www.yihuisoft.com/testAppBiz
VUE_APP_ENV=development

.env.production【NODE_ENV=production是为了打包时进行css和js分离】

NODE_ENV=production
VUE_APP_BASE_API=https://www.yihuisoft.com/appBiz
VUE_APP_ENV=production

2.在http.js中引入使用

http.js

import axios from 'axios'
axios.defaults.baseURL = process.env.VUE_APP_BASE_API;

3.在package.json中配置

package.json

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "uat-build": "vue-cli-service build --mode uat"
  },

4.在组件中根据环境判断使用不同变量

use.vue

            //判断不同环境
            if(process.env.VUE_APP_ENV === 'production'){
                alert('production');
            }else if(process.env.VUE_APP_ENV === 'uat'){
                alert('uat');
            }else if(process.env.VUE_APP_ENV === 'development'){
                alert('development');
            }