Vue cli 3 0設定環境變數和模式

通過配置環境變數，可以使我們的開發更加高效。最常見的情景是我們的api請求介面，他常常是分為開發環境，測試環境和生產環境的。如果每一次打包我們都是修改請求介面的位址，那樣就顯得太愚蠢了。並且如果區分區分環境的地方很多，你可能會有很多疏漏。而通過設定環境變數，統一管理每個環境下的所有變數。

在vur cli 2.0的版本中我們是通過在config資料夾進行配置的，vue/cli 3.0相對簡單，只需要在專案根目錄建立.env檔案即可。

你可以替換你的專案根目錄中的下列檔案來指定環境變數：

.env # 在所有的環境中被載入 .env.local # 在所有的環境中被載入，但會被 git 忽略 .env.[mode] # 只在指定的模式中被載入 .env.[mode].local # 只在指定的模式中被載入，但會被 git 忽略

foo=bar //無效

被載入的變數將會對vue-cli-service的所有命令、外掛程式和依賴可用。

環境載入屬性

為乙個特定模式準備的環境檔案 (例如.env.production) 將會比一般的環境檔案 (例如.env) 擁有更高的優先順序。

此外，vue cli 啟動時已經存在的環境變數擁有最高優先順序，並不會被.env檔案覆寫。

值得注意的是，如果下圖右邊紅框顯示設定，那node_env='qqenv'，如果刪掉紅框，node_env='development'

所有解析出來的環境變數都可以在public/index.html中以 html 插值中介紹的方式使用。

模式是 vue cli 專案中乙個重要的概念。預設情況下，乙個 vue cli 專案有三個模式：

也就是：執行後邊的命令的時候，預設是進入到了前邊預設的模式，即使專案中沒有顯式設定.env.development等檔案，node_env也會預設為對應模式的名字，base_url也會存在。這兩個特殊的環境變數是一定存在的。可以在.env.development檔案下修改該模式的node_env。

注意模式不同於node_env(這只是乙個特殊的環境變數)，乙個模式可以包含多個環境變數。

你可以通過為.env檔案增加字尾來設定某個模式下特有的環境變數。比如，如果你在專案根目錄建立乙個名為.env.development的檔案，寫入其他的環境變數，那麼在這個檔案裡宣告過的變數就只會在 development 模式下被載入。

你可以通過傳遞--mode選項引數為命令列覆寫預設的模式。例如，如果你想要在構建命令中使用開發環境變數，請在你的package.json指令碼中加入：

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

如果這三個模式不夠用，當然你也可以建立屬於自己的模式，也就是自定義模式。例如上圖的.env.qq

通過為 .env檔案增加字尾來設定某個模式下的特有環境變數。

三種模式檔案配置

.env.development檔案 node_env = 'development'

.env.test檔案（重寫了node_env值） node_env = 'production'

.env.product檔案 node_env = 'production'

tips: 即使不是生產環境，也可以將模式設定為 production ，這樣可以獲得 webpack 預設的打包優化。

"scripts":

注意：–mode後邊的名字必須和步驟1中 .env.*** 的名字保持一致

開發環境還需要配置devserver的跨域

devserver: 
},'/api2': }}
}

Vue cli 3 0設定環境變數和模式

vue cli 3 0環境安裝

vue cli3 0線上環境和開發環境的配置

Vue CLI 環境變數和模式

Vue cli 3 0設定環境變數和模式

vue cli 3 0環境安裝

vue cli3 0線上環境和開發環境的配置

Vue CLI 環境變數和模式

相關推薦