vue-cli3.x配置開發、測試及生產三個環境的地址

背景：正常情況下webpack給我們提供了development和production兩個環境。一個用於開發，一個用於正式環境，想象是美好的，但是我們有時候不止一個服務器吧，比如更新到正式服之前我們需要先在測試服測試通過，這個時候如果還是兩個環境變量那我們打包的時候就需要手動切換地址了呀，所以基於此，再手動增加一個測試環境。

下面以vue-cli3.x爲例：

1、新建vue-cli項目，如下

vue create demo_01

2、目錄結構

3、在根目錄新建三個文件.env / .env.production / .env.test，內容分別爲

// .env
VUE_APP_CURRENTMODE='www.test.com'

// .env.production
VUE_APP_CURRENTMODE='production'

// .env.test
VUE_APP_CURRENTMODE ='test'

.env這個文件主要是開發環境，.env.production與.env.test的區別爲前者是正式環境，後者爲測試環境。

4、修改package.json如下。

"scripts": {
    "serve": "vue-cli-service serve",
    "pro": "vue-cli-service build --mode production",
    "start": "npm run serve",
    "test": "vue-cli-service build --mode test",
    "lint": "vue-cli-service lint"
},

爲了方便查看效果，我們在app.vue輸出一下：

分別執行npm run serve 、npm run test、npm run pro查看控制檯。

// npm run serve

// npm run test

// npm run pro

環境區分出來了，做其他方面的數據區分就好解決了，比如可以根據VUE_APP_CURRENTMODE來使用不同的請求域名等。

號外：

爲什麼我們經過上面的配置就能達到區分環境的效果了呢？

原因在這裏：

模式是 Vue CLI 項目中一個重要的概念。默認情況下，一個 Vue CLI 項目有三個模式：
development 模式用於 vue-cli-service serve
production 模式用於 vue-cli-service build 和 vue-cli-service test:e2e
test 模式用於 vue-cli-service test:unit

模式不同於 NODE_ENV，一個模式可以包含多個環境變量。也就是說，每個模式都會將 NODE_ENV 的值設置爲模式的名稱——比如在development 模式下 NODE_ENV 的值會被設置爲 “development”。
你可以通過爲 .env文件增加後綴來設置某個模式下特有的環境變量。比如，如果你在項目根目錄創建一個名爲 .env.development的文件，那麼在這個文件裏聲明過的變量就只會在 development 模式下被載入。
你可以通過傳遞 --mode 選項參數爲命令行覆寫默認的模式。

也就是說，上面我們修改package.json的scripts，爲pro及test設置了--mode production/test， 當我們執行npm run test/pro時已經將當前的NODE_ENV設置爲對應的環境變量，也加載了對應模式下的.env文件。