Vue 開發項目過程中在開發環境，測試環境，生產環境設置不同的請求接口域名

一、平常項目前期我們會使用線下的本地服務請求接口，上線之前測試環境以及生產環境，以下講解不同環境的接口配置（3.x為例）

二、步驟

　　1、在根目錄下創建".env"文件，內容如下。（production生產環境）

NODE_ENV = 'production'
VUE_APP_FLAG = 'pro'

　　2、在根目錄下創建".env.test"文件,這是測試環境需要的配置

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

　　創建截圖如下

　　

 

 

三、找到根目錄下的package.json文件

　　在script中添加　　"test": "vue-cli-service build --mode test" （這句話的作用是用來打包生成測試環境的代碼，也即是說測試環境的打包需要使用npm run test命令來代替npm run build,生產環境則需要使用npm run build）

　　

 

四、在main.js中判斷當前環境需要加載的接口域名（需要引入axios）

　　注：此處如果使用else中的開發環境路徑，則vue.config.js中配置的代理將不起作用，故可將此處注釋使用代理

import axios from 'axios'

/*第一層if判斷生產環境和開發環境*/
if (process.env.NODE_ENV === 'production') {
  /*第二層if，根據.env文件中的VUE_APP_FLAG判斷是生產環境還是測試環境*/
  if (process.env.VUE_APP_FLAG == 'pro') {
      //production 生產環境
      axios.defaults.baseURL = 'http://api.xinggeyun.com';//路徑
  } else {
      //test 測試環境
      axios.defaults.baseURL = 'http://192.168.0.152:8103';//路徑
  } 
} else { 
  //dev 開發環境 
  //axios.defaults.baseURL = 'http://192.168.0.152:8102';//路徑
}　

 

 

 

 五、執行不同的命令生產對應環境的包

　　生產環境域名包：npm run build

　　測試環境域名包：npm run test