模式

【模式】~ 是 vue-cli 項(xiàng)目中一個(gè)重要的概念。

【分類】vue-cli 默認(rèn)有 3 個(gè)模式：

• development: 用于 vue-cli-service serve；
• test: 用于 vue-cli-service test:unit；
• production: 用于 vue-cli-service build & vue-cli-service test:e2e；

注意

1 、可通過傳遞 --mode 選項(xiàng)參數(shù)為命令行覆寫默認(rèn)的模式。

• 例如：想要在構(gòu)建命令中使用開發(fā)環(huán)境變量：

vue-cli-service build --mode development

2、當(dāng)運(yùn)行 vue-cli-service 命令時(shí)，所有的環(huán)境變量都從對(duì)應(yīng)的環(huán)境文件中載入。

3、NODE_ENV將決定您的應(yīng)用運(yùn)行的模式，是開發(fā)，生產(chǎn)還是測(cè)試，因此也決定了創(chuàng)建哪種 webpack 配置。

• 示例 1：通過將 NODE_ENV 設(shè)置為 “test”, vue-cli 會(huì)創(chuàng)建一個(gè)優(yōu)化過后的，并且旨在用于單元測(cè)試的 webpack 配置，它并不會(huì)處理圖片以及一些對(duì)單元測(cè)試非必需的其他資源。
• 示例 2；NODE_ENV=development 創(chuàng)建一個(gè) webpack 配置，該配置啟用熱更新，不會(huì)對(duì)資源進(jìn)行 hash 也不會(huì)打出 vender bundles, 目的是為了在開發(fā)的時(shí)候能夠快速重新構(gòu)建。
• 示例 3：當(dāng)你運(yùn)行 vue-cli-service build 命令時(shí)，無(wú)論你要部署到哪個(gè)環(huán)境，應(yīng)該始終把 NODE_ENV 設(shè)置為 “production” 來(lái)獲取可用于部署的應(yīng)用程序。

4、若文件內(nèi)不包含 NODE_ENV 變量，它的值將取決于模式。

• 例如：在 production 模式下被設(shè)置為 “production”, 在 test 模式下被設(shè)置為 “test”, 默認(rèn)則是 “development”。

5、若在環(huán)境中有默認(rèn)的 NODE_ENV, 應(yīng)移除它或在運(yùn)行 vue-cli-service 命令時(shí)明確地設(shè)置 NODE_ENV.

環(huán)境變量

【規(guī)則】vue-cli 項(xiàng)目可在根目錄放置下列文件來(lái)指定環(huán)境變量：

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

【示例】一個(gè)環(huán)境文件只包含環(huán)境變量的 “鍵=值” 對(duì)：

Foo=bar
VUE_APP_NOT_SECRET_CODE=some_value

【注意】

1、不要在應(yīng)用程序中存儲(chǔ)任何機(jī)密信息；（例如：私有 API 秘鑰）

2、環(huán)境變量會(huì)隨著構(gòu)建打包嵌入到輸出代碼，意味著任何人都有機(jī)會(huì)看到它；

3、只有 NODE_ENV, BASE_URL, 以 VUE_APP_ 開頭的變量將通過 webpack.DefinePlugin 靜態(tài)地嵌入到客戶端側(cè)的代碼中。原因是為了避免意外公開機(jī)器上可能具有相同名稱的私鑰。

4、被載入變量將會(huì)對(duì) vue-cli-service 的所有命令、插件和依賴可用。

【拓展】

dotenv 了解解析環(huán)境文件規(guī)則的細(xì)節(jié)，參考這個(gè)。

dotenv-expand 來(lái)實(shí)現(xiàn)變量擴(kuò)展（Vue CLI 3.5+ 支持）。

FOO=foo
BAR=bar

CONCAT=$FOO$BAR # CONCAT=foobar

環(huán)境文件加載優(yōu)先級(jí)

• 為一個(gè)特定模式準(zhǔn)備的環(huán)境文件（例如 env.production ）將會(huì)比一般的環(huán)境文件（例如 .env） 擁有更高的優(yōu)先級(jí)。
• .local 優(yōu)先級(jí) 高于 其他；見下面 Staging 示例中；
• vue-cli 啟動(dòng)時(shí) 已經(jīng)存在的環(huán)境變量 擁有最高優(yōu)先級(jí)，并不會(huì)被 .env 文件覆寫。
• 環(huán)境文件發(fā)生變化，需要重啟服務(wù)。因?yàn)椋?env 環(huán)境文件是通過運(yùn)行 vue-cli-service 命令載入的，因此需要重啟服務(wù)。

示例： Staging 模式

1、準(zhǔn)備環(huán)境變量文件

• 1.1、假設(shè)有一個(gè)應(yīng)用包含一個(gè) .env 文件；

VUE_APP_TITL=My App

• 1.2、和一個(gè) .env.staging 文件；

NODE_ENV=production
VUE_APP_TITLE=My App(staging)

2、運(yùn)行指令

2.1、指令 1：vue-cli-service build

會(huì)加載可能存在的 .env, .env.production, .env.production.local 文件然后構(gòu)建出生產(chǎn)環(huán)境應(yīng)用。

2.2、指令 2：vue-cli-service build --mode staging

會(huì)在 staging 模式下加載可能存在的 .env, .env.staging, .envstagin.local 文件然后創(chuàng)建出生產(chǎn)環(huán)境應(yīng)用。

3、結(jié)論

2 種情況下，根據(jù) NODE_ENV，構(gòu)建出的應(yīng)用都是生產(chǎn)環(huán)境應(yīng)用的；

但在 staging 版本中， process.env.VUE_APP_TITLE 被覆寫成了另一個(gè)值 “My App(staging)”。

客戶端中使用環(huán)境變量

規(guī)則

規(guī)則：只有以 VUE_APP_ 開頭的變量會(huì)被 webpack.DefinePlugin 靜態(tài)嵌入到客戶端側(cè)的包中。

應(yīng)用代碼中訪問： console.log(process.env.VUE_APP_SECRET)

構(gòu)建過程中， precess.env.VUE_APP_SECRET 將會(huì)被相應(yīng)的值所取代。

• 在 VUE_APP_SECRET=secret 時(shí)，會(huì)被替換為 “secret”。
• 在 VUE_APP_SECRET=noscret 時(shí)，會(huì)被替換為 “noscret”。

除了 VUE_APP_* 變量外，在應(yīng)用代碼中始終可用的還有 2 個(gè)特殊的變量：

VUE_APP_*

見上；

NODE_ENV

會(huì)是 “development”, “production” 或 “test” 中的一個(gè)。具體的值取決于應(yīng)用運(yùn)行的模式。

BASE_URL

會(huì)和 vue.config.js 中的 publicPath 選項(xiàng)相符，即應(yīng)用會(huì)部署到的基礎(chǔ)路徑。

所有解析出來(lái)的環(huán)境變量都可以在 public/index.html 中以 HTML 插值中介紹的方式使用。

自定義

# 端口號(hào)
port=8888
# 注意：中間和末尾位置不能有空格

應(yīng)用

1、版本信息；

注意：在 vue.config.js 文件中計(jì)算環(huán)境變量。它們?nèi)匀恍枰?VUE_APP_ 前綴開頭。

process.env.VUE_APP_VERSION = require('./package.json').version

module.exports = {
  // config
}

只在本地有效的變量

場(chǎng)景：有時(shí)可能有些不應(yīng)該提交到代碼庫(kù)中的變量，尤其是當(dāng)項(xiàng)目托管托管在公共倉(cāng)庫(kù)時(shí)。

解決：應(yīng)該使用一個(gè) .env.local 文件取而代之。

本地環(huán)境文件默認(rèn)會(huì)被忽略，且出現(xiàn)在 .gitignore 中。

.local 也可加在指定模式的環(huán)境文件上，比如 .env.development.local 將會(huì)在 development 模式下被載入，且被 git 忽略。

（vue-cli 中 git 忽略，普通的還是不會(huì)忽略）

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論