快捷導(dǎo)航

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

更新時間：2023年04月02日 09:46:05 作者：大佩梨

本文主要介紹了vue中.env文件配置環(huán)境變量的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

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"
  }