BrowserDevTools

Vite .env 檢查器

貼上你的 .env 與 .env.example:得到缺少、多餘、空值的變數,附行號的重複鍵,Vite 特有的陷阱(帶 VITE_ 前綴的密鑰會被內聯進客戶端 bundle),以及可直接提交的 env.d.ts。

兩個檔案都只在這個分頁內解析。不上傳、也沒有分享連結——.env 這種檔案永遠不該離開你的機器。

檢查結果

6 個鍵 · 3 個錯誤 · 3 個警告
  • 錯誤VITE_STRIPE_SECRET_KEY「VITE_STRIPE_SECRET_KEY」看起來是密鑰,卻帶了客戶端前綴;Vite 會把它內聯進客戶端 bundle,任何人都讀得到。
  • 錯誤VITE_STRIPE_SECRET_KEY「VITE_STRIPE_SECRET_KEY」會暴露給客戶端,而且它的值看起來像真實憑證(Stripe/OpenAI-style key)。若這是真檔案,請輪替該憑證。
  • 錯誤VITE_SENTRY_DSN示例裡有、這裡沒有:「VITE_SENTRY_DSN」——應用會讀到 undefined。
  • 警告VITE_STRIPE_SECRET_KEY這裡有、示例裡沒有:「VITE_STRIPE_SECRET_KEY」——記得補進 .env.example,讓下一個人知道。
  • 警告API_TIMEOUT這裡有、示例裡沒有:「API_TIMEOUT」——記得補進 .env.example,讓下一個人知道。
  • 警告API_TIMEOUT「API_TIMEOUT」存在,但值是空的。
/// <reference types="vite/client" />

interface ImportMetaEnv {
  readonly API_TIMEOUT?: string;
  readonly DATABASE_URL: string;
  readonly SESSION_SECRET: string;
  readonly VITE_ANALYTICS_ID: string;
  readonly VITE_API_URL: string;
  readonly VITE_STRIPE_SECRET_KEY?: string;
}

interface ImportMeta {
  readonly env: ImportMetaEnv;
}

為什麼要做檢查器,而不是又一個轉換器

搜尋「.env to json」,第一頁是一整排轉換器。它們做的都是同一件機械的事,卻沒有一個回答你在部署當下真正想問的問題:這個檔案完整嗎?裡面有沒有危險的東西?

所以這個工具是反過來做的——轉換是副產品,檢查才是產品。它比對兩個檔案、套用 Vite(多數 Vue 3 專案的執行環境)特有的規則,並回傳一份有型別的 env.d.ts,讓下一個人不必再手寫。

所有事情都在你的分頁裡完成:檔案在本機解析、不上傳、也不產生分享連結。這一點在這裡比平常更重要,因為 .env 正是那種永遠不該離開你機器的檔案。請把產出當成檢查輔助:驗證器懂語法與 Vite 規則,但它不懂你的部署環境。

常見問題

我的 .env 會被上傳嗎?
不會。解析、比對與程式碼產生都在瀏覽器內完成。沒有接收檔案內容的後端端點、不會記錄、也不產生分享連結——想看證據可以打開 Network 面板。
為什麼針對 Vite,而不是純 dotenv?
因為危險的規則來自 Vite。純 dotenv 沒有客戶端/伺服器的區分,密鑰上殘留 VITE_ 前綴在那裡無害,在這裡卻很嚴重。解析器仍支援一般 .env 語法:註解、引號值與 export 前綴。
它會讀我其他的 .env 檔案嗎?
不會。Vite 會依特定順序疊加 .env、.env.local、.env.[mode] 與 .env.[mode].local;本工具只比對你貼上的兩個檔案,讓你不必猜哪一層勝出,就能看出部署少了什麼。
什麼算密鑰?
鍵名符合 SECRET、TOKEN、PASSWORD、PRIVATE、CREDENTIAL、API_KEY、DATABASE_URL、DSN 等樣式,或值看起來像真實憑證(JWT、sk-live-、ghp_、AKIA、長 hex 或 base64)。這是供人工複核的啟發式判斷,不是安全保證。
產出可以直接用在 CI 嗎?
env.d.ts 與 .env.example 是可以提交的純文字檔。檢查本身在瀏覽器內執行;若要在 CI 設阻斷門檻,管線裡需要 dotenv linter——這個工具是給「盯著一個失敗的部署」的那一刻用的。