Vite－Environment Variable

好用的環境變數。

預設的環境變數

• import.meta.env.MODE 目前的環境（development / production）
• import.meta.env.BASE_URL 就是 base url
• import.meta.env.PROD 確認環境是不是 production（布林值）
• import.meta.env.DEV 確認環境是不是 development（布林值）
• import.meta.env.SSR 有沒有使用 SSR

添加 .env 檔案

• .env
• .env.[mode]
• .env.local
• .env.[mode].local

附註一：[mode] 的值為 development 和 production
附註二：.local 一般會用來存敏感資訊，所以不會被寫入 git

優先權為：.env.[mode].local > .env.[mode] > .env.local > .env

一定要用 VITE 前綴字才可以存取到，例如說現在有底下這些環境變數：

VITE_SOME_KEY=123
DB_PASSWORD=foobar

那在存取的時候只能讀到 VITE_SOME_KEY，讀不到 DB_PASSWORD：

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

自定義 .env 檔案

如果預設提供的 .env.[mode] 不能滿足你要的環境，例如說你想要用一個 .env.demo 的檔案來存變數，所以寫了這樣的檔案：

// .env.demo
VITE_ENV_KEY=env.demo

那麽可以把 build 的指令改成這樣子：

"scripts": {
  "dev": "vite",
  "build": "tsc && vite build",
  "demo": "tsc && vite build --mode demo", // <- new
  "preview": "vite preview"
}

這樣子 vite 在打包的時就會更新 mode 的值，並讀取 .env.demo 這個檔案的內容。