在用vue
框架时,经常用到多种环境
一种是开发环境,就是本地开发时的环境,
一种是测试环境,就是测试人员使用的服务环境
一种是生产环境,就是要发布到线上的环境。
注意:日常开发是用开发环境的,如果发布到线上时,需要切换环境为线上。如果人为去切换也是可以的,但是会容易忘记,可以通过配置不同的运行命令来自动切换环境。
1、手动创建 文件 .env.development
和.env.production和.env.test几
个文件
.env.development如下:(开发环境)
NODE_ENV = 'development'
VUE_APP_MODE = 'development'
VUE_APP_API_URL = 'http://47.94.4.201/'
.env.production如下:(正式线上环境,或者叫生产环境)
NODE_ENV = 'production'
VUE_APP_MODE = 'production'
VUE_APP_API_URL = 'https://www.baidu.c0m/' // 正式环境地址
.env.test(测试环境)
NODE_ENV = 'test'
VUE_APP_MODE = 'test'
VUE_APP_API_URL = 'http://49.94.4.21/'
2、在axios封装中使用环境配置项(api.js中)
//获取当前环境配置项中的地址,会自动追加到接口上
axios.defaults.baseURL = process.env.VUE_APP_API_URL
//获取配置项信息,可以做你的逻辑处理
if(process.env.VUE_APP_MODE==='development'){
//开发环境下的执行操作
console.log('开发');
}else if(process.env.VUE_APP_MODE==='test'){
//测试环境下的执行操作
console.log('测试');
}else{
//生产环境下的执行操作
console.log('正式');
}
3、打包命令配置:
//找到package.json
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"test": "vue-cli-service build --mode test",
},