在實際項目開發(fā)中,經(jīng)常會碰到需要環(huán)境變量的情景,在vue-cli的環(huán)境下,默認已經(jīng)配置了一個NODE_ENV的環(huán)境變量,當npm run dev的時候這個是development, 當npm run build 的時候這個是production.用過vue-cli開發(fā)的通常對這個都不陌生,用這個最多的基本就是我們配置ajax請求的域名頭了,

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

通常會有測試服務(wù)器和正式服務(wù)器環(huán)境之分,我們請求的域名也得區(qū)分,所以通過proces.env.NODE_ENV來區(qū)分環(huán)境變量,通過這個能夠全局訪問的參數(shù),我們可以處理很多需要環(huán)境處理不同的操作.

上面的process.env.NODE_ENV是vue-cli默認配置的,有時候我們可能覺得光是只有一個開發(fā)環(huán)境和生產(chǎn)環(huán)境還不夠,比如我們還想來一個測試壞境,這時候就需要自己定義了.以下以windows壞境為例,mac環(huán)境類似.

首先可以安裝cross-env

npm install cross-env --save-dev

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

我們只想加一個環(huán)境變量,可以復制一份,在dev下加一個devtest命令:

"devtest": "cross-env TESTING=true node build/dev-server.js",

這樣我們就可以通過npm run devtest也能啟動整個服務(wù)了,注意上面的命令,我們加了一個TESTING=true ,這個就是加入的環(huán)境變量,TESTING:true, 通過上面的devtest的配置,我們可以運行npm run devtest像nppm run dev那樣運行起來整個程序,不過我們發(fā)現(xiàn),此時在項目中我們獲取不到process.env.TESTING這個變量,這是為什么呢,如果是直接用webpack是可以的,經(jīng)過查看,是在vue-cli的一系列配置文件中,已經(jīng)寫死了這些,不過我們可以改動加上

在根目錄 config下,有dev.env.js和prod.env.js,這兩個文件就是關(guān)鍵了,我們在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命令對應(yīng),加入打包測試的環(huán)境變量.

vue-cli的配置本質(zhì)還是webpack的配置, 普通的webpack配置也可以采用此方法.

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

最新評論