vue - 多环境配置总结

最新推荐文章于 2024-08-19 15:00:38 发布

胆小鬼゛

最新推荐文章于 2024-08-19 15:00:38 发布

阅读量510

点赞数 7

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_44799030/article/details/135479701

版权

.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"
  },