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

我们要完成通过不同命令切换不同环境对应的请求接口的url

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

首先我们将package.json中添加配置不同命令

"scripts": {
    "prod": "vue-cli-service serve --mode production", 
    "dev": "vue-cli-service serve --mode development",
    "test":"vue-cli-service serve --mode test",
    "build": "vue-cli-service build --mode test"
  }

然后在项目根目录新建.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 test

npm run dev

npm run prod