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

vue-cli3.0移除了配置文件目錄： config和build文件夾。能夠說是很是的精簡了，那移除了配置文件目錄後如何自定義配置環境變量和模式呢?

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

全部方法確定是來源於現實的需求。在一個產品的前端開發過程當中，通常來講會經歷本地開發、測試腳本、開發自測、測試環境、預上線環境，而後才能正式的發佈。對應每個環境可能都會有所差別，好比說服務器地址、接口地址、websorket地址…… 等等。在各個環境切換的時候，就須要不一樣的配置參數，因此就能夠用環境變量和模式，來方便咱們管理。

環境變量

cli-3.0總共提供了四種方式來制定環境變量：

1. 在根目錄添加.env文件，配置全部狀況下都會用到的配置（不知道這個存在的意義，全部的都須要的也就不須要配置了吧）。
2. 在根目錄添加.env.local 文件，配置全部狀況下都會用到的配置，與.env的區別是隻會在本地，該文件不會被git跟蹤。
3. 在根目錄添加.env.[mode] 文件，配置對應某個模式下的配置,好比：.env.development來配置開發環境的配置。
4. 在根目錄添加.env.[mode].local文件，配置對應某個模式下的配置,與.env.[mode]的區別也只是會在本地生效，該文件不會被git跟蹤。

在文件中，咱們只須要以key=value的方式就能夠設置變量了。
例如：

FOO=bar
VUE_APP_SECRET=secret

環境變量的使用
設置完環境變量以後就能夠在咱們的項目中使用這兩個變量了。不過還須要注意的是在項目的不一樣地方使用，限制也不同。

1. 在項目中，也就是src中使用環境變量的話，必須以VUE_APP_開頭。例如咱們能夠在main.js中直接輸出：console.log(process.env.VUE_APP_SECRET)
2. 在webpack配置中使用，沒什麼限制，能夠直接經過process.env.XXX來使用

3. 在public/index.html中使用的：分三類：（沒怎麼用過）

   <%= VAR %> 用於非轉換插值  例如：`<link rel="shortcut icon" href="<%= BASE_URL %>favicon.ico">`
      <%- VAR %> 用於HTML轉義插值
      <% expression %> 用於JavaScript控制流

模式

模式是Vue CLI項目中的一個重要概念。默認狀況下，Vue CLI項目中有三種模式：

1. development：在vue-cli-service serve下，即開發環境使用
2. production：在vue-cli-service build 和vue-cli-service test:e2e下，即正式環境使用
3. test： 在vue-cli-service test:unit下使用

另外，若是你想要修改模式下默認的環境變量的話能夠經過--mode來實現，例如：

"dev-build": "vue-cli-service build --mode development"

有環境變量就能完成咱們的需求了，爲何須要有模式的存在，這裏我沒查到詳細的文檔，我的認爲模式是爲了提供給第三方的插件一個辨識。例如vuex能夠根據模式的不一樣，在development自動注入devtoolPlugin插件，利於開發，而在production中檢測到錯誤不會進行console。

舉例

說完了概念，可能仍是比較模糊，能夠試着添加一個stage環境，用來模擬預上線。
首先在package.json添加一種類型，並修改默認環境變量爲stage環境變量

在根目錄下建立.env.stage文件，來聲明變量：

這裏聲明的NODE_ENV = ‘production’用來表示這是生產環境。VUE_APP_CURRENTMODE爲項目變量，outputDir爲除數打包後文件的地址。
在vue.config.js中使用環境變量，制定輸出文件爲環境變量配置的文件：

最後執行命令yarn stage能看到根目錄下生成了stage文件：

這樣咱們就配置完了stage環境。詳細的項目地址能夠參考：以vue-cli3.0爲基礎，結合vue-router、vuex、axios、iview組件庫搭建一個工程化前端demo

參考文檔：Environment Variables and Modes