前言

在真實(shí)項(xiàng)目里，「如果每次切換環(huán)境都手動(dòng)改代碼，不僅低效，還極易把測試地址帶到線上。Vue CLI 把「模式 + 環(huán)境變量」做成了一套約定大于配置的體系，只要理解規(guī)則，就能讓同一份源碼在任意環(huán)境自動(dòng)作出正確的行為。

一、模式（mode）

Vue CLI 把「運(yùn)行命令」抽象成三種默認(rèn)模式：

• development：對應(yīng) vue-cli-service serve
• production：對應(yīng) vue-cli-service build
• test：對應(yīng) vue-cli-service test:unit

模式本身不攜帶任何變量，它只是約定文件名前綴。

當(dāng)你執(zhí)行：

npm run serve        # 實(shí)際等價(jià)于 vue-cli-service serve --mode development
npm run build:staging # 自定義命令，等價(jià)于 vue-cli-service build --mode staging

CLI 會按以下順序?qū)ふ椅募?/p>

• .env.[mode].local
• .env.[mode]
• .env.local（永遠(yuǎn)被 git ignore）
• .env

同名變量后者覆蓋前者，因此你可以把公共值寫在 .env，把敏感值寫在 .env.local，把環(huán)境特有值寫在 .env.staging，一條命令即可切換。

二、環(huán)境變量

• 只有 VUE_APP_ 開頭的變量才會被打包

任何機(jī)器級環(huán)境變量（PATH、HOME …）都會被忽略，避免污染前端運(yùn)行時(shí)。

想讓變量進(jìn) bundle，必須加前綴：

# .env.staging
VUE_APP_API_BASE=https://staging.api.example.com

在代碼里直接用：

axios.defaults.baseURL = process.env.VUE_APP_API_BASE

構(gòu)建時(shí) CLI 會把 process.env.VUE_APP_API_BASE 替換為字符串字面量，零運(yùn)行時(shí)開銷。

• 運(yùn)行時(shí)不可動(dòng)態(tài)修改

變量在 npm run build 那一刻就被寫死，前端無法通過 process.env.XXX = 'new' 去改。

需要運(yùn)行時(shí)可變配置？把變量寫成 JSON 文件或接口返回，再在前端異步加載即可。

三、一個(gè)文件，一條命令，三種環(huán)境

假設(shè)我們要同時(shí)支持 dev / staging / prod：

根目錄
├─ .env                 # 公共配置
├─ .env.development     # 本地開發(fā)
├─ .env.staging         # 預(yù)發(fā)
├─ .env.production      # 線上
└─ package.json

文件內(nèi)容示例：

# .env
VUE_APP_TITLE=MyApp

# .env.development
VUE_APP_API_BASE=http://localhost:3000

# .env.staging
VUE_APP_API_BASE=https://staging.api.example.com

# .env.production
VUE_APP_API_BASE=https://api.example.com

自定義腳本：

"scripts": {
  "serve": "vue-cli-service serve",
  "build:staging": "vue-cli-service build --mode staging",
  "build": "vue-cli-service build"
}

執(zhí)行：

npm run build:staging

CLI 自動(dòng)讀取 .env.staging 與 .env 合并，輸出包里只有 https://staging.api.example.com。

四、CI/CD 中的最佳實(shí)踐

• 不把敏感密鑰寫進(jìn)倉庫

  把 .env*.local 加入 .gitignore，在 CI 里用環(huán)境變量注入：

   echo $STAGING_KEY >> .env.staging.local

• 單一 Dockerfile，多階段構(gòu)建

  通過 ARG MODE 動(dòng)態(tài)決定 --mode，同一份鏡像可在測試、預(yù)發(fā)、生產(chǎn)之間漂移。

• 可視化差異

  在構(gòu)建日志里打印 console.log('Build mode:', process.env.NODE_ENV, process.env.VUE_APP_API_BASE)，一眼確認(rèn)變量是否生效。

五、常見問題

• 變量名可以改前綴嗎？

  可以，在 vue.config.js 里設(shè)置 envPrefix: 'APP_' 即可。

• 為什么本地 .env 改了值不生效？

  vue-cli-service serve 會緩存舊進(jìn)程，重啟 dev-server 或加 --no-cache 即可。

• 如何讀取非 VUE_APP 變量？

  在 vue.config.js 用 chainWebpack 手動(dòng)注入：

  config.plugin('define').tap(args => {
    args[0]['process.env.CUSTOM'] = JSON.stringify(process.env.CUSTOM)
    return args
  })

總結(jié) 

到此這篇關(guān)于Vue腳手架模式與環(huán)境變量的文章就介紹到這了,更多相關(guān)Vue腳手架模式與環(huán)境變量內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論