Vite 是 Vue.js 作者尤雨溪開發的「下一代前端開發與構建工具」，它也是新興的前端框架 SvelteKit 預設的構建工具。

在程式專案上，我們往往會把某些重要的資訊（例如後端的 URL、第三方服務的 API 端點等）放在獨立的檔案內做管理，這個檔案習慣上會命名為 .env，再利用某些機制把 .env 內的參數載入到程式中成為可調用的變數，這些變數我們稱為「環境變數」。

環境變數

這些環境變數往往伴隨著專案的運行環境而變，在 Vite 的設計上，已經為我們預留了 development 環境（開發環境）與 production 環境（生產環境），兩者以檔名做區分，依照 Vite 的規範，開發環境的檔名是 .env.development，下面是一個最陽春的例子：

# .env.development

VITE_BACKEND_HOST = http://localhost:5000

而在生產環境也有這個變數，但是值是不一樣的，依照 Vite 的規範，生產環境的檔名是 .env.production，內容如下：

# .env.production

VITE_BACKEND_HOST = https://c.herokuapp.com

只要把這兩個檔案置於專案的根目錄下，Vite 就會自動載入，要注意的是，必須像上面的範例一樣，在變數前方有 VITE_ 的前綴 Vite 才會載入，否則會無情的忽略。

當執行 vite dev 時，會載入 .evn.development；當執行 vite build 或 vite preview 時，則會載入 .env.production。

調用環境變數

延續上面的例子，在程式中，我們用 import.meta.env.VITE_BACKEND_HOST 就可調用該環境變數，超級簡單。

除了我們自行定義的環境變數，Vite 還有內建四個它設定的環境變數讓我們運用：

  • import.meta.env.MODE：应用运行的模式。
  • import.meta.env.BASE_URL：部署应用时的基本 URL。它由 base 配置项决定。
  • import.meta.env.PROD：应用是否运行在生产环境。
  • import.meta.env.DEV：应用是否运行在开发环境（永远与 import.meta.env.PROD 相反）。

以上抄錄自《Vite 官方中文文档》。

實際用起來的範例：

console.log(import.meta.env.VITE_BACKEND_HOST);

如果是在 SvelteKit 元件內則是：

<p>{ import.meta.env.VITE_BACKEND_HOST }</p>

其他前端框架應該也是類似的用法。

編譯與環境變數

預設情況下，Vite 會根據子命令而判斷當前是 development 還是 production。

如果是執行 npx vite 這會啟動 Vite 的開發伺服器，此時會載入 .env.development 內之變數。

如果是執行 npx vite build 則會進行 production 建置，換言之會載入的是 .env.production 內之變數。

有時候兩個環境不夠用，可能還會有個介於 development 和 production 之間的 staging 環境，此時可以自行追加一個 .env.staging 檔案，並且以 npx vite build --mode staging 的方式去建置，此時 Vite 就會去載入 .env.staging 囉！

這幾個命令也可以寫入 package.json 方便大家使用：

{
  "scripts": {
    "dev": "vite",
    "build:production": "vite build",
    "build:staging": "vite build --mode staging",
    "preview": "vite preview --port 5173",
  },
}

帥吧！

安全事項

前端專案意味著運行的環境是在用戶的瀏覽器，也意味著所有程式內的參數是用戶可見的（即便有混淆過），所以不適合放任何的連線帳密等私密資料，這些私密的串接，建議放到後端去做，方為上策。

參考資料