vue配置多种环境代理 vue区分多种环境 vue区分生产环境,测试环境,正式环境
1.首先加载一个cross-env,在修改package时会用到
npm install --save-dev cross-env
2. 确定自己有几种环境就在根目录下新建几个.env文件
比如test环境则新建.env.test
VUE_APP_ENV = 'test'
//此处没有用NODE_ENV区分,VUE_APP_ENV是自己新建的变量,自己新建的变量格式一定要VUE_APP_XXX
3.新建完成后在config.js中配置
let baseUrl = ""
if (process.env.VUE_APP_ENV == "development") {
console.log('dev环境');
baseUrl = "dev请求地址"
} else if (process.env.VUE_APP_ENV == "test") {
console.log('test环境');
baseUrl = "test请求地址"
} else if (process.env.VUE_APP_ENV == "production") {
console.log('生产环境');
baseUrl = "生产环境请求地址"
}
接着配置 的proxy中target就可以直接取值baseUrl
4.package.json中打包方式需要修改一下
"scripts": {
"serve": "vue-cli-service serve",
"build": "cross-env VUE_APP_ENV=development vue-cli-service build",
"build--test": "cross-env VUE_APP_ENV=test vue-cli-service build",
"build--production": "cross-env VUE_APP_ENV=production vue-cli-service build",
"lint": "vue-cli-service lint"
},
cross-env VUE_APP_ENV=test 就是用来设置我用来判断环境的变量,注意变量值需要一致
在打包时需要注意要打包哪个环境的,如果由框架或平台打包也要记得设置不同环境的打包命令
如果不确定可以像我一样在第三步使用的时候console出来