vue-cli配置環境變數

在實際專案開發中,經常會碰到需要環境變數的情景,在vue-cli的環境下,預設已經配置了一個NODE_ENV的環境變數,當 npm run dev 的時候這個是development, 當 npm run build 的時候這個是production.用過vue-cli開發的通常對這個都不陌生,用這個最多的基本就是我們配置ajax請求的域名頭了,

if (process.env.NODE_ENV === 'production') {
  axios.defaults.baseURL = 'http://customer.medsci.cn'
}
複製程式碼

通常會有測試伺服器和正式伺服器環境之分,我們請求的域名也得區分,所以通過proces.env.NODE_ENV來區分環境變數,通過這個能夠全域性訪問的引數,我們可以處理很多需要環境處理不同的操作. 上面的process.env.NODE_ENV是vue-cli預設配置的,有時候我們可能覺得光是隻有一個開發環境和生產環境還不夠,比如我們還想來一個測試壞境,這時候就需要自己定義了.以下以windows壞境為例,mac環境類似. 首先可以安裝 cross-env

npm install cross-env --save-dev
複製程式碼

vue-cli的配置本質就是webpack的配置,當我們執行 npm run dev 的時候,其實執行的是package.json 中的scripts 的dev中 ,即build/dev-server.js 這裏面一系列的配置啟動整個服務.

我們只想加一個環境變數,可以複製一份,在dev下加一個devtest命令:

"devtest": "cross-env TESTING=true  node build/dev-server.js",
複製程式碼

這樣我們就可以通過npm run devtest也能啟動整個服務了,注意上面的命令,我們加了一個TESTING=true ,這個就是加入的環境變數,TESTING:true, 通過上面的devtest的配置,我們可以執行npm run devtest像nppm run dev那樣執行起來整個程式,不過我們發現,此時在專案中我們獲取不到process.env.TESTING這個變數,這是為什麼呢,如果是直接用webpack是可以的,經過檢視,是在vue-cli的一系列配置檔案中,已經寫死了這些,不過我們可以改動加上 在根目錄 config下,有dev.env.js和prod.env.js,這兩個檔案就是關鍵了,我們在NODE_ENV下面加一行 TESTING:process.env.TESTING

module.exports = {
  NODE_ENV: '"production"',
  TESTING: process.env.TESTING
}
複製程式碼

這時我們就能全域性訪問process.env.TESTING變數了,當我們npm run dev的時候,這個是undefined,當npm run devtest的時候是true, 同理我們可以新增一個npm run test命令, 與npm run build命令對應,加入打包測試的環境變數. vue-cli的配置本質還是webpack的配置, 普通的webpack配置也可以採用此方法. 我的部落格原文 blog.noob6.com/2018/07/08/…