vue-cli配置環境變量的方法

在實際項目開發中,經常會碰到需要判斷環境變量的情景。

在  vue-cli  的環境下,已經默認配置了一個NODE_ENV的環境變量。當 npm run dev 時，環境變量是development ；當 npm run build 時，環境變量是production。

用過vue-cli開發的通常對NODE_ENV都不陌生,比如我們配置ajax請求的域名頭時，就是通過判斷 process.env.NODE_ENV來實現的。

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

項目中通常會有測試服務器環境和正式服務器環境之分，前端請求接口的域名也得區分。我們通過proces.env.NODE_ENV來區分環境變量（proces.env.NODE_ENV是一個能夠全局訪問的參數），可以處理那些需要根據環境變量來做不同操作的問題。

上面的process.env.NODE_ENV是vue-cli默認配置的，但是在實際項目開發中，只有開發環境和生產環境是還不夠。比如我們還想來一個測試壞境，這時候就需要自己定義了。

實現步驟：

1、安裝cross-env

npm install cross-env --save-dev

2、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 像 npm 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 的時候，TESTING是undefined；當 npm run devtest 的時候，TESTING是true。

同理，我們可以添加一個 npm run test 命令, 與 npm run build 命令對應，加入打包測試的環境變量。