一、環(huán)境變量和模式

1. 環(huán)境變量

Vite 在一個(gè)特殊的 import.meta.env 對象上暴露環(huán)境變量。

這里有一些在所有情況下都可以使用的內(nèi)建變量：

• import.meta.env.MODE: {string} 應(yīng)用運(yùn)行的模式，該變量值就是你當(dāng)前運(yùn)行的 .env.{MODE}文件，例如：值為dev時(shí)，使用的就是 .env.dev這個(gè)文件
• import.meta.env.BASE_URL: {string} 部署應(yīng)用時(shí)的基本 URL。他由base 配置項(xiàng)決定這個(gè)值就是你在vite.config.js中定義的base的值
• import.meta.env.PROD: {boolean} 應(yīng)用是否運(yùn)行在生產(chǎn)環(huán)境
• import.meta.env.DEV: {boolean} 應(yīng)用是否運(yùn)行在開發(fā)環(huán)境 (永遠(yuǎn)與 import.meta.env.PROD相反)
• mport.meta.env.SSR: {boolean} 應(yīng)用是否運(yùn)行在 server 上

2. 生產(chǎn)環(huán)境替換

在生產(chǎn)環(huán)境中，這些環(huán)境變量會在構(gòu)建時(shí)被靜態(tài)替換，因此，在引用它們時(shí)請使用完全靜態(tài)的字符串。動態(tài)的 key 將無法生效。例如，動態(tài) key 取值 import.meta.env[key] 是無效的。

它還將替換出現(xiàn)在 JavaScript 和 Vue 模板中的字符串。這本應(yīng)是非常少見的，但也可能是不小心為之的。

在這種情況下你可能會看到類似 Missing Semicolon 或 Unexpected token 等錯(cuò)誤，例如當(dāng) “process.env.NODE_ENV” 被替換為 "“development”: "。

有一些方法可以避免這個(gè)問題：

• 對于 JavaScript 字符串，你可以使用 unicode 零寬度空格來分割這個(gè)字符串，例如： ‘import.meta\u200b.env.MODE’
• 對于 Vue 模板或其他編譯到 JavaScript 字符串的 HTML，你可以使用 <wbr> 標(biāo)簽，例如：import.meta.<wbr>env.MODE

二、.env 文件

1. 基本用法

Vite 使用 dotenv 從你的 環(huán)境目錄 中的下列文件加載額外的環(huán)境變量：

.env                # 所有情況下都會加載
.env.local          # 所有情況下都會加載，但會被 git 忽略
.env.[mode]         # 只在指定模式下加載
.env.[mode].local   # 只在指定模式下加載，但會被 git 忽略

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

• 一份用于指定模式的文件（例如 .env.production）會比通用形式的優(yōu)先級更高（例如 .env）。
• 另外，Vite 執(zhí)行時(shí)已經(jīng)存在的環(huán)境變量有最高的優(yōu)先級，不會被 .env 類文件覆蓋。例如當(dāng)運(yùn)行 VITE_SOME_KEY=123 vite build 的時(shí)候。
• .env 類文件會在 Vite 啟動一開始時(shí)被加載，而改動會在重啟服務(wù)器后生效。

加載的環(huán)境變量也會通過 import.meta.env 以字符串形式暴露給客戶端源碼。

為了防止意外地將一些環(huán)境變量泄漏到客戶端，只有以 VITE_ 為前綴的變量才會暴露給經(jīng)過 vite 處理的代碼。例如下面這些環(huán)境變量：

VITE_SOME_KEY=123
DB_PASSWORD=foobar

只有 VITE_SOME_KEY 會被暴露為 import.meta.env.VITE_SOME_KEY 提供給客戶端源碼，而 DB_PASSWORD 則不會。

console.log(import.meta.env.VITE_SOME_KEY) // 123
console.log(import.meta.env.DB_PASSWORD) // undefined

請注意，如果想要在環(huán)境變量中使用 $ 符號，則必須使用 \ 對其進(jìn)行轉(zhuǎn)義。

KEY=123
NEW_KEY1=test$foo   # test
NEW_KEY2=test\$foo  # test$foo
NEW_KEY3=test$KEY   # test123

如果你想自定義 env 變量的前綴，請參閱 envPrefix。

安全注意事項(xiàng)

• .env.*.local 文件應(yīng)是本地的，可以包含敏感變量。你應(yīng)該將 .local 添加到你的 .gitignore 中，以避免它們被 git 檢入。
• 由于任何暴露給 Vite 源碼的變量最終都將出現(xiàn)在客戶端包中，VITE_* 變量應(yīng)該不包含任何敏感信息。

2. TypeScript 的智能提示

默認(rèn)情況下，Vite 在 vite/client.d.ts 中為 import.meta.env 提供了類型定義。

隨著在 .env[mode] 文件中自定義了越來越多的環(huán)境變量，你可能想要在代碼中獲取這些以 VITE_ 為前綴的用戶自定義環(huán)境變量的 TypeScript 智能提示。

要想做到這一點(diǎn)，你可以在 src 目錄下創(chuàng)建一個(gè) env.d.ts 文件，接著按下面這樣增加 ImportMetaEnv 的定義：

/// <reference types="vite/client" />

interface ImportMetaEnv {
  readonly VITE_APP_TITLE: string
  // 更多環(huán)境變量...
}

interface ImportMeta {
  readonly env: ImportMetaEnv
}

三、模式

1. 基本用法

默認(rèn)情況下，開發(fā)服務(wù)器 (dev 命令) 運(yùn)行在 development (開發(fā)) 模式，而 build 命令則運(yùn)行在 production (生產(chǎn)) 模式。

這意味著當(dāng)執(zhí)行 vite build 時(shí)，它會自動加載 .env.production 中可能存在的環(huán)境變量：

# .env.production
VITE_APP_TITLE=My App

在你的應(yīng)用中，你可以使用 import.meta.env.VITE_APP_TITLE 渲染標(biāo)題。

在某些情況下，若想在 vite build 時(shí)運(yùn)行不同的模式來渲染不同的標(biāo)題，你可以通過傳遞 --mode 選項(xiàng)標(biāo)志來覆蓋命令使用的默認(rèn)模式。

例如，如果你想在 staging （預(yù)發(fā)布）模式下構(gòu)建應(yīng)用：

vite build --mode staging

還需要新建一個(gè) .env.staging 文件：

# .env.staging
VITE_APP_TITLE=My App (staging)

由于 vite build 默認(rèn)運(yùn)行生產(chǎn)模式構(gòu)建，你也可以通過使用不同的模式和對應(yīng)的 .env 文件配置來改變它，用以運(yùn)行開發(fā)模式的構(gòu)建：

# .env.testing
NODE_ENV=development

本文內(nèi)容源自vite官方文檔

總結(jié)

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

最新評論