在現代 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.生產文件範例：

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 檔案內建對環境變數的支持，可以輕鬆管理跨不同環境的配置。