模式

【模式】~ 是 vue-cli 項目中一個重要的概念。

【分類】vue-cli 默認有 3 個模式：

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

注意

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

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

vue-cli-service build --mode development

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

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

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

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

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

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

環(huán)境變量

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

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

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

Foo=bar
VUE_APP_NOT_SECRET_CODE=some_value

【注意】

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

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

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

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

【拓展】

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

dotenv-expand 來實現(xiàn)變量擴展（Vue CLI 3.5+ 支持）。

FOO=foo
BAR=bar

CONCAT=$FOO$BAR # CONCAT=foobar

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

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

示例： Staging 模式

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

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

VUE_APP_TITL=My App

• 1.2、和一個 .env.staging 文件；

NODE_ENV=production
VUE_APP_TITLE=My App(staging)

2、運行指令

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

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

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

會在 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 被覆寫成了另一個值 “My App(staging)”。

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

規(guī)則

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

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

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

• 在 VUE_APP_SECRET=secret 時，會被替換為 “secret”。
• 在 VUE_APP_SECRET=noscret 時，會被替換為 “noscret”。

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

VUE_APP_*

見上；

NODE_ENV

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

BASE_URL

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

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

自定義

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

應(yīng)用

1、版本信息；

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

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

module.exports = {
  // config
}

只在本地有效的變量

場景：有時可能有些不應(yīng)該提交到代碼庫中的變量，尤其是當項目托管托管在公共倉庫時。

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

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

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

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

總結(jié)

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

最新評論