Vite中環境變數的處理

在現代 Web 開發中，管理 API 金鑰、資料庫憑證和不同環境的各種配置等敏感資料至關重要。將這些變數直接儲存在程式碼中可能會帶來安全風險並使部署變得複雜。 Vite 是一種現代前端建置工具，提供了一種透過 .env 檔案管理環境變數的簡單方法。

什麼是 .env 檔案？

.env 檔案是一個簡單的設定文件，用於定義特定於環境的變數。這些變數可以在您的應用程式中訪問，同時與原始程式碼保持分離。這種做法可以輕鬆管理不同的環境（開發、暫存和生產），而無需對敏感資料進行硬編碼。

Vite 中的環境變數:

Vite內建了對環境變數的支持，可以更輕鬆地根據當前環境注入不同的值。 Vite 處理環境變數的方式如下：

全域變數： Vite 在建置時注入環境變數。
前綴變數：出於安全原因，只有以 VITE_ 為前綴的變數才會暴露給客戶端 JavaScript 程式碼。任何不以這種方式添加前綴的變數都無法在瀏覽器中存取。

Vite 環境變數範例：

VITE_API_URL=https://api.example.com

在 Vite 中設定 .env 檔案
Vite 支援多個 .env 文件，可讓您為特定環境定義環境變數。這是一個典型的設定：

.env：在所有環境中共享的環境變數的預設檔。
.env.development：特定於開發環境的變數。
.env.production：特定於生產環境的變數。

.env 檔案範例：

VITE_API_URL=https://api.example.com
VITE_APP_NAME=MyViteApp

.env.development 檔案範例：

VITE_API_URL=http://localhost:3000
VITE_DEBUG_MODE=true

.env.Production 檔案範例：

VITE_API_URL=https://api.production.com
VITE_DEBUG_MODE=false

存取 Vite 中的環境變數

要存取 Vite 專案內的環境變量，請使用 import.meta.env 物件。

console.log(import.meta.env.VITE_API_URL); // Outputs the value of VITE_API_URL

Vite 在建置過程中會根據目前環境自動取代 import.meta.env 值。

管理多個環境:

Vite 的 .env 檔案可以針對開發、登台和生產等不同環境進行客製化。根據您所處的環境，Vite 會載入對應的 .env 檔案：

運行 vite 載入 .env.development 檔案。
執行 vite build 會載入 .env.Production 檔案。
在特定環境下運作：

vite --mode staging

除錯環境變數:

如果您遇到環境變數未如預期運作的問題，請檢查以下內容：

• 變數前綴：確保所有客戶端變數都有 VITE_ 前綴，因為 Vite 會忽略沒有此前綴的變數。
• Env 載入順序：確保 .env 和環境特定檔案位於專案根目錄中並且命名正確。
• 檢查建置流程：使用 console.log(import.meta.env) 查看開發過程中所有可用的環境變數。

結論：：

Vite 透過 .env 檔案內建對環境變數的支持，可以輕鬆管理跨不同環境的配置。

以上是Vite中環境變數的處理的詳細內容。更多資訊請關注PHP中文網其他相關文章！