vue配置多种环境代理 vue区分多种环境 vue区分生产环境,测试环境,正式环境

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出来