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');
}