一、為什么要配置環(huán)境變量?

在一個產(chǎn)品的前端開發(fā)過程中，一般來說會經(jīng)歷本地開發(fā)、測試腳本、開發(fā)自測、測試環(huán)境、預(yù)上線環(huán)境，然后才能正式的發(fā)布。

對應(yīng)每一個環(huán)境可能都會有所差異，比如說用戶訪問資源權(quán)限、服務(wù)器地址、接口地址等。

在各個環(huán)境切換的時候，就需要不同的配置參數(shù)，所以就可以用環(huán)境變量和模式，來方便我們管理。

二、在Vite中配置環(huán)境變量

1.環(huán)境變量和模式

因?yàn)轫?xiàng)目使用VIte創(chuàng)建的，所以在配置環(huán)境變量之前我們需要查看在Vite中的環(huán)境變量和模式。

2.環(huán)境變量

Vite 在一個特殊的 import.meta.env 對象上暴露環(huán)境變量。這里有一些在所有情況下都可以使用的內(nèi)建變量：

• import.meta.env.MODE: {string} 應(yīng)用運(yùn)行的模式。
• import.meta.env.BASE_URL: {string} 部署應(yīng)用時的基本 URL。他由base 配置項(xiàng)決定。
• 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相反)。
• import.meta.env.SSR: {boolean} 應(yīng)用是否運(yùn)行在 server 上。

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

在生產(chǎn)環(huán)境中，這些環(huán)境變量會在構(gòu)建時被靜態(tài)替換，因此，在引用它們時請使用完全靜態(tài)的字符串。

動態(tài)的 key 將無法生效。例如，動態(tài) key 取值 import.meta.env[key] 是無效的。

4.env文件

在根目錄下新建這兩個文件

.env.dev  文件

NODE_ENV = dev
VITE_NAME="LJY"

.env.pro 文件

NODE_ENV = pro
VITE_NAME="LJY"

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

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

一份用于指定模式的文件（例如 .env.production）會比通用形式的優(yōu)先級更高（例如 .env）。

另外，Vite 執(zhí)行時已經(jīng)存在的環(huán)境變量有最高的優(yōu)先級，不會被 .env 類文件覆蓋。例如當(dāng)運(yùn)行 VITE_SOME_KEY=123 vite build 的時候。

.env 類文件會在 Vite 啟動一開始時被加載，而改動會在重啟服務(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

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

安全注意事項(xiàng)

如果你想要自定義 env 變量的前綴，請參閱 envPrefix 選項(xiàng)。

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

總結(jié)

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

最新評論