vue-cli 3.0如何配置多種開發環境下的環境變量

爲何會須要配置多種環境變量

一個產品的開發過程當中,通常來講都是會經歷這麼一個過程.本地發開--測試版本部署--測試--預上線--正式上線.對應的每個環節中的服務器地址,接口地址...都會不同。那麼咱們須要怎麼去處理這種狀況。

怎麼去配置環境變量

vue-cli 3.0腳手架構建的項目根目錄中新建一個.env.[model]文件,model爲一個變量，能夠經過這個model的變量值來判斷當前屬於哪一個環境。model能夠根據你的需求來修改，該文件中寫上對應的鍵值對。你須要多少個環境，就建立多少個.env.[model]在根目錄中，文件以下圖：

.env.prod文件: NODE_ENV = "production" VUE_APP_URL = "prod" .env.dev文件: NODE_ENV = "production" VUE_APP_URL = "dev"

注意:配置環境的字段須要VUE_APP開頭,這樣才能被webpack識別。

如今咱們來到配置文件，這個配置文件的功能是爲了判斷當前打包環境是生產仍是測試，或者本地，固然你也能夠有不少的環境。在配置文件中咱們經過process.env.VUE_APP_URL這個全局字段去判斷環境，而後將對應的接口地址匹配上。注意一點上面的NODE_ENV = "production"不能夠省略,vue-cli 3.0 會根據NODE_ENV = "production"來判斷是不是生產環境,若是你改變了這個就會被默認NODE_ENV = "development,development和production模式下打包出來的包結構會不一樣,爲了一致性,因此配置文件的第一個字段應該設置成爲NODE_ENV = "production"。

package.json文件下的腳本

"start": "vue-cli-service serve --mode location",
    "dev": "vue-cli-service build --mode dev",
    "prod": "vue-cli-service build --mode prod"
複製代碼

script腳本中node dist-start.js是我打包項目以後須要在本地啓動並查看的代碼，能夠忽略哦。

上面提到建立的.env.[model]文件，文件名中的model對應package.json文件中的打包腳本--model [model]。例如：當我如今想打包正式環境，正式環境對應.env.[model]就是.env.prod。在package.json的script中添加"prod": "vue-cli-service build --mode prod",prod這個對應配置文件名的model，這樣webpack打包時會自動追蹤到這個文件，並去讀取其中的各類配置字段，咱們在項目中任意位置就能夠經過process.env.xx拿到其中的xx配置屬性。package.json文件腳本配置以下：

如今咱們只須要運行對應的腳本命令就能夠打包對應環境的項目代碼，例如：我如今須要打包prod環境下的項目，在控制檯運行npm run prod，就能夠執行正式環境打包。運行npm run dev,則能夠打包測試環境。該模式也可用於自動化部署。

若有不對或者寫的很差的地方歡迎提出，有問題的同窗歡迎提問哦!