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/…