欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue中.env文件配置環(huán)境變量的實現(xiàn)

 更新時間:2023年04月02日 09:46:05   作者:大佩梨  
本文主要介紹了vue中.env文件配置環(huán)境變量的實現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

.env 文件配置

1?? 文件說明

.env:全局默認(rèn)配置文件,無論什么環(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ù)文件名進(jìn)行加載的,所以上面說“不要亂起名,也無需專門控制加載哪個文件”

比如執(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)境配置文件 > 全局配置文件

當(dāng)全局的配置文件和環(huán)境的配置文件有相同配置項時,環(huán)境的配置項會覆蓋全局的配置項(.env默認(rèn)執(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)文章

相關(guān)文章

最新評論