.env环境配置文件
.env文件是vue运行项目时的环境配置文件;
但是在实际开发过程中,有本地环境、测试环境、预生产、生产环境等等;
不同环境对应的配置会不一样。因此,需要通过不同的.env文件实现差异化配置。
1.手动创建 文件 .env.development 和.env.production和.env.test
.env.development:(开发环境)
NODE_ENV = 'development' #模式
VUE_APP_MODE = 'development' #通过"VUE_APP_MODE"变量来区分环境
VUE_APP_URL = "/api"
VUE_APP_SOURCEIMG_URL='http://XXXX"
.env.production:(正式/生产环境)
NODE_ENV = 'production'
VUE_APP_MODE = 'production'
VUE_APP_URL = "/abcde/"
VUE_APP_SOURCEIMG_URL='https://bhsd.cn/api/datasetLogo/'
.env.test:(测试环境)
NODE_ENV = 'production'
VUE_APP_MODE = 'test'
VUE_APP_URL = "/api"
VUE_APP_SOURCEIMG_URL='http://10.0.899.78:78/api/datasetLogo/'
2.在axios封装中使用环境配置项
axios.defaults.baseURL = process.env.VUE_APP_URL
3.代码逻辑不同的地方使用
if(process.env.VUE_APP_MODE==='development'){
console.log('开发',process.env.VUE_APP_MODE);
}else if(process.env.VUE_APP_MODE==='test'){
console.log('测试',process.env.VUE_APP_MODE);
}else{
console.log('正式',process.env.VUE_APP_MODE);
}
4.打包命令配置(package.json)
"scripts": {
"serve": "vue-cli-service serve",
"lint": "vue-cli-service lint",
"build:prod": "vue-cli-service build --mode production",
"build:test": "vue-cli-service build --mode test"
},