.env 文件配置

1?? 文件說明

.env：全局默認配置文件，無論什么環(huán)境都會加載合并。

.env.development：開發(fā)環(huán)境的配置文件

.env.production：生產(chǎn)環(huán)境的配置文件

注意：三個文件的文件名必須按.env方式命名，不能亂起名，否則讀取不到文件。

2?? 內(nèi)容格式

注意：屬性名必須以 VUE_APP_ 開頭，如：VUE_APP_XXX

3?? 加載

vue 會根據(jù)啟動命令自動加載相對應(yīng)的環(huán)境配置文件。vue是根據(jù)文件名進行加載的，所以上面說“不要亂起名，也無需專門控制加載哪個文件”

比如執(zhí)行npm run serve命令，會自動加載.env.development文件

開發(fā)環(huán)境加載 .env 和 .env.development 。

生成環(huán)境加載 .env 和 .env.production 。

運行npm run serve的時候主要還是看package.json中 server屬性的–mode后面跟的是啥。如果是development，就會加載.env.development文件。

在package.json里面配置好，執(zhí)行serve的時候用開發(fā)環(huán)境的。build打包用生產(chǎn)或者測試的

package.json 配置項：

"scripts": {
    "serve": "vue-cli-service serve --mode development",
    "build": "vue-cli-service build",
    "build:sit": "vue-cli-service build --mode production.sit",
    "build:uat": "vue-cli-service build --mode production.uat",
    "build:prod": "vue-cli-service build --mode production",
    "lint": "vue-cli-service lint",
    "et": "node_modules/.bin/et",
    "et:init": "node_modules/.bin/et -i",
    "et:list": "gulp themes"
  }

4?? 優(yōu)先級

環(huán)境配置文件 > 全局配置文件

當全局的配置文件和環(huán)境的配置文件有相同配置項時，環(huán)境的配置項會覆蓋全局的配置項（.env默認執(zhí)行，后面執(zhí)行的.env.developmemt的話有相同屬性的會覆蓋.env）

如：

開發(fā)環(huán)境

打印 process.env 屬性（全局屬性，任何地方均可使用）：

從上面圖片中可知，.env 中的全局屬性 VUE_APP_PREVIEW 與 VUE_APP_API_BASE_URL 被覆蓋。
.env 中的全局屬性 VUE_APP_AGE 被保留。

5?? 項目中的使用

在配置文件中定義的屬性在其它文件中如何訪問呢？？

可以使用 process.env.xxx 來訪問屬性。

如：

 到此這篇關(guān)于vue中.env文件配置環(huán)境變量的實現(xiàn)的文章就介紹到這了,更多相關(guān)vue .env配置環(huán)境變量內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章

最新評論