快捷導(dǎo)航

vite項(xiàng)目import.meta.env如何能獲取非VITE開發(fā)的環(huán)境變量

更新時(shí)間：2024年05月08日 15:01:36 作者：微信小程序APP開發(fā)

這篇文章主要介紹了vite項(xiàng)目import.meta.env如何能獲取非VITE開發(fā)的環(huán)境變量問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vite項(xiàng)目import.meta.env能獲取非VITE開發(fā)的環(huán)境變量

在Vite項(xiàng)目中，??import.meta.env???是一個(gè)全局對(duì)象，用于訪問(wèn)環(huán)境變量。

默認(rèn)情況下，??import.meta.env??只能獲取到Vite的開發(fā)環(huán)境變量，而不能獲取非Vite開發(fā)的環(huán)境變量。

這是因?yàn)閂ite使用特定的方式來(lái)處理環(huán)境變量，并提供了一個(gè)插件來(lái)注入這些環(huán)境變量。

如果你想在Vite項(xiàng)目中獲取非Vite開發(fā)的環(huán)境變量，可以通過(guò)以下步驟：

安裝dotenv包：在Vite項(xiàng)目中，首先需要安裝dotenv包，用于加載.env文件中的環(huán)境變量。

可以使用以下命令進(jìn)行安裝：

npm install dotenv --save-dev

創(chuàng)建.env文件：在項(xiàng)目根目錄下創(chuàng)建一個(gè)名為.env的文件，并在文件中定義你需要的環(huán)境變量。

例如，.env文件內(nèi)容如下：

API_URL=https://example.com/api

在vite.config.js中配置dotenv插件：打開vite.config.js文件，添加以下配置來(lái)啟用dotenv插件：

import { defineConfig } from 'vite'
import dotenv from 'dotenv'
 
export default defineConfig({
  plugins: [dotenv()],
})

在你的代碼中引入環(huán)境變量：現(xiàn)在你可以在你的代碼中使用process.env來(lái)訪問(wèn)環(huán)境變量。

例如，可以通過(guò)process.env.API_URL來(lái)訪問(wèn)之前在.env文件中定義的API_URL環(huán)境變量。

注意事項(xiàng)：

在Vite項(xiàng)目中，??dotenv??插件將會(huì)自動(dòng)讀取??.env??文件，并將其中的環(huán)境變量注入到??process.env??中。?
?.env??文件應(yīng)當(dāng)被添加到你的代碼版本控制系統(tǒng)的??.gitignore??文件中，以避免將敏感信息提交到源代碼庫(kù)中。

通過(guò)上述步驟，你可以在Vite項(xiàng)目中使用??import.meta.env??來(lái)獲取非Vite開發(fā)的環(huán)境變量。

Vite的環(huán)境變量

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

環(huán)境變量

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

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

import.meta.env.MODE: {string} 應(yīng)用運(yùn)行的模式。
import.meta.env.BASE_URL: {string} 部署應(yīng)用時(shí)的基本 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 上。

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

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

動(dòng)態(tài)的 key 將無(wú)法生效。

例如，動(dòng)態(tài) key 取值 import.meta.env[key] 是無(wú)效的。

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

在這種情況下你可能會(huì)看到類似 Missing Semicolon 或 Unexpected token 等錯(cuò)誤，

例如當(dāng)"process.env.NODE_ENV" 被替換為 "“development”: "。

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

對(duì)于 JavaScript 字符串，你可以使用 unicode 零寬度空格來(lái)分割這個(gè)字符串，

例如： 'import.meta\u200b.env.MODE'。

對(duì)于 Vue 模板或其他編譯到 JavaScript 字符串的 HTML，你可以使用標(biāo)簽，

例如：import.meta.env.MODE。

.env 文件

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

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

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

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

另外，Vite 執(zhí)行時(shí)已經(jīng)存在的環(huán)境變量有最高的優(yōu)先級(jí)，不會(huì)被 .env 類文件覆蓋。

例如當(dāng)運(yùn)行 VITE_SOME_KEY=123 vite build 的時(shí)候。

.env 類文件會(huì)在 Vite 啟動(dòng)一開始時(shí)被加載，而改動(dòng)會(huì)在重啟服務(wù)器后生效。

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

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

例如下面這些環(huán)境變量：

VITE_SOME_KEY=123
DB_PASSWORD=foobar

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

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

此外，Vite 使用 dotenv-expand 來(lái)直接拓展變量。想要了解更多相關(guān)語(yǔ)法，請(qǐng)查看它們的文檔。

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

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

如果你想自定義 env 變量的前綴，請(qǐng)參閱 envPrefix。

安全注意事項(xiàng)

.env.*.local 文件應(yīng)是本地的，可以包含敏感變量。

你應(yīng)該將 .local 添加到你的 .gitignore 中，以避免它們被 git 檢入。

由于任何暴露給 Vite 源碼的變量最終都將出現(xiàn)在客戶端包中，VITE_* 變量應(yīng)該不包含任何敏感信息。

TypeScript 的智能提示

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

隨著在 .env[mode] 文件中自定義了越來(lái)越多的環(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
}

如果你的代碼依賴于瀏覽器環(huán)境的類型，比如 DOM 和 WebWorker，你可以在 tsconfig.json 中修改 lib 字段來(lái)獲取類型支持。