webpack介面環境切換的配置-超簡單

以前Vue的專案一直切換測試和正式環境時，一直習慣都是通過一個固定的常量，然後通過註釋來切換環境的(會有個風險，就是在打包部署到正式環境時，如果忘記改這個切換環境，或者切換了，然後忘記cmd+s(mac) 儲存程式碼的話，就直接打包，注：websotrm不像idea那樣可以實時儲存到位的，然後就部署到正式環境，那麼問題就大了)，所以，今天突然閒著沒事，想優化這一操作習慣，隨便看了下網上關於這塊的配置方法，感覺有些繁瑣，於是自己想著去實際了下自己想的方法，如果真是的瞭解了webpack,會發現很簡單，具體操作如下：

專案首先是通過Vue-cli建立的空專案

第一步，config資料夾 

這裡需要理解一點就是，process本身就是可以當做一個全域性物件來看待的，可以通過下圖來得知

所以，用來做環境切換豈不是剛好嘛~

第二步，axios中配置的baseURL直接取剛設定的變數

第三步，檢視package.json這個檔案裡配置的指令（這裡就是預設的）

當執行 npm run dev時，就是執行的測試環境的baseURL,具體請看 webpack.dev.conf.js裡面引用的

就是執行的dev.env，所以此時的環境就是測試環境的，當然如果切換到正式環境，也是可以再仿寫個指令的，然後指向prod.env就是了

注：這裡再說說 打包指令，npm run build 不就是執行的build.js檔案嘛，而build.js檔案中如上圖中，已經預設是production了，所以，打包後生成的dist資料夾，然後請求的介面域名就是正式環境的，不需要更改

綜上：其實就是先分別在dev和prod配置檔案新增個全域性變數 BASE_URL，然後再在axios中的獲取賦值就行了，這樣打包部署時，根本不需要再去手動切換了，至於網上千篇一律的一大堆，看著真的繁瑣了。。