vue-cli3.0 配置環境變量與模式

前言

---

去年8月份到公司作了一個新項目，當時vue-cli3.0正式版纔出來，也就順便就用vue-cli3.0腳手架來搭起項目。也就開啓了爬坑之旅（對於我這個菜鳥前端來講）。
因爲vue-cli3.0移除了配置文件目錄： config和build文件夾，那麼移除了配置文件目錄後
1.如何自定義配置環境變量和模式呢?
2.如何配置反向代理呢？
3.如何配置css預處理器呢？
這些問題接踵而來！當時3.0版本剛出來也沒有相關文章來查詢，只好閱讀3.0版本官方指南。問題2和3都順利的解決，就剩問題1，可能思想還停留在2.0緣由，對於3.0文檔配置環境變量與模式的指南我一時間也沒讀懂（菜鳥嘛，你們懂得，哈哈哈）。項目也挺急的遂暫時放棄，用了一個很low的辦法暫時解決了這個問題（手動滑稽）。
複製代碼

爲何須要配置環境變量和模式呢？

---

在一個產品的前端開發過程當中，通常來講會經歷本地開發、測試環境、預上線環境，而後纔到打包正式版本。對應每個環境可能都會有所差別，好比說服務器地址、接口地址、websorket地址等等。在各個環境切換的時候，就須要不一樣的配置參數，因此就能夠用環境變量和模式，來方便咱們管理。
複製代碼

環境變量

---

3.0版本總共提供了4種方式來制定環境變量，分別是如下4鍾。
在你的項目根目錄中建立下列文件來指定環境變量：

.env                # 在全部的環境中被載入 
.env.local          # 在全部的環境中被載入，但會被 git 忽略
.env.[mode]         # 只在指定的模式中被載入                        例： .env.development
.env.[mode].local   # 只在指定的模式中被載入，但會被 git 忽略        例： .env.development.local

以下圖：
複製代碼

在cli3.0建立後.env那三個文件和vue.confige.js都是要本身建立的。

那文件裏面怎麼寫呢？
一個環境文件只包含環境變量的「鍵=值」對：
好比： 
    VUE_APP_HOST=http://juejin.im   （假設你項目的接口地址是這個）
    VUE_APP_webSocketUrl=ws://0.0.0.0:17112 （假設你項目的webSocket地址是這個）
    outputDir=test_dist
    （備註： 若是你想在項目裏面使用到這個環境變量，而不單單隻在配置裏面使用 請使用 VUE_APP_ 這個前綴來定義環境變量）
複製代碼

最後怎麼使用呢？一張圖展現,以下：
複製代碼

咱們建立的文件名.env.test 對應 --mode test，打測試環境包的時候輸入 npm run test-build ，
咱們建立的文件名.env.production 對應 --mode production，打正式的生產環境包就輸入 npm run build;這就ok啦！

另外，爲了區分正式生產環境包和測試環境包，避免搞混。能夠在環境文件裏面加上outputDir=test_dist，而後在vue.config.js配置文件裏面：
複製代碼

outputDir默認值是dist，因此在正式生產環境文件不用寫 outputDir=test_dist

打包後的項目目錄就是這樣的。以下圖：
複製代碼

在項目裏面使用環境變量

console.log(process.env.VUE_APP_HOST)
複製代碼

第一次寫文章，有錯漏的地方請多指教！