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