在網上找來找去，找到很多資料。自己實踐後再統計一下。

運用環境：公司增加測試環境，用腳手架搭出來的環境只有開發和線上，也就是隻有dev和prod。現在增加一個test環境。很多其他的資料是用了一個外掛。我這個方法不用外掛。好了，話不多說。開始搞。

1.在build資料夾中建立build-test.js檔案

build-test.js中的程式碼很簡單，就兩行。主要就是配置一個環境變數用以區別測試和正式環境。這裡沒有直接修改原有的process.env.NODE_ENV是擔心會影響到原本的邏輯。

注意：type的值必須單雙引號兩層巢狀，不能直接為’test’，否則會報錯

// 配置環境變數 type 為 test 

process.env.type = '"test"'

// 引入build.js檔案，執行原先的編譯程式碼

require('./build')
 

2.在package.json檔案中新增npm run test命令

新增一條命令，執行我們上文建立的build-test.js檔案

"test": "node build/build-test.js"

3.在request.js中判斷 (可以不寫這個創造例項。這個我只是為了記錄設定baseURL，不影響分離環境。)

// 建立axios例項

const service = axios.create({

baseURL: process.env.BASE_API, // api的base_url

timeout: 10000 // 請求超時時間

})

4.在prod.env.js中改為

npm 提供一個npm_lifecycle_event變數，返回當前正在執行的指令碼名稱，比如pretest、test、posttest等等。所以，可以利用這個變數，在同一個指令碼檔案裡面，為不同的npm scripts命令編寫程式碼

'use strict'

const target = process.env.npm_lifecycle_event;

if (target == 'test') {

//測試

var obj = {

NODE_ENV: '"production"',

//post用當前域名

BASE_API: '"http://192.168.8.20:8100"',

}

}else {

//線上

var obj = {

NODE_ENV: '"production"',

//post用當前域名。順便給我們公司優醫家打個廣告，我們公司是一家關注使用者健康的企業。有APP，可以看看哦~

BASE_API: '"http://app_admin.uhealth-online.com.cn"',

}

}

module.exports = obj;
 

 這裡再說一個需求，有一些第三方服務，給的appkey，分為開發環境和正式環境，那麼可以把這個appkey也寫在這裡，然後去需要的頁面呼叫。類似這種。

在需要的檔案裡面，在生命週期中取出來，像這樣。

this.appKey = process.env.appKey

這樣就能每次打包不需要手動切換不同appkey了！

最後附上一個需要外掛來區分環境的文章，丟個連結，有需要的可以看看。