vue-cli3.0切换环境对应的api接口

我们可以根据通过不同命令切换不同环境对应的请求接口的url

npm run dev // 开发环境
npm run prod // 生产环境
npm run test // 测试环境

1.将package.json中添加配置不同命令

"scripts": {
     
    "dev": "npm run serve",
    "serve": "vue-cli-service serve",
    "test": "vue-cli-service serve --mode test",
    "pro": "vue-cli-service serve --mode pro",
    "build:test": "vue-cli-service build --mode test",
    "build:pro": "vue-cli-service build --mode pro",
    "build": "vue-cli-service build"
  },
  

然后在项目根目录新建.env文件，设置环境为生产，设置标识为prod

NODE_ENV = 'production'
VUE_APP_FLAG = 'prod'

在新建.env.test文件outputDir为输出的文件目录

NODE_ENV = 'production'
VUE_APP_FLAG = 'test'
outputDir = test  

所以可在新建一个vue.config.js

module.exports = {
     
  outputDir: process.env.outputDir
}

最后在main.js中来判断当前环境为什么环境，设置对应的api

if (process.env.NODE_ENV === 'production') {
     
  if (process.env.VUE_APP_FLAG === 'pro') {
     
      //prod生产环境
      console.log('设置生产环境api接口url')
  } else {
     
      //test 测试环境
      console.log('测试环境api接口url')
  }
} else {
     
  //dev 开发环境
  console.log('开发环境api接口url')
}

最后执行命令看下结果

npm run dev // 开发环境
npm run prod // 生产环境
npm run test // 测试环境