Vite 系統環境變數 簡化前端開發與 CI/CD 流程的環境管理關鍵

Vite 專案中，環境變數的妥善管理對於系統運作至關重要。如同人生情境需要靈活應變，前端應用在開發、測試及生產環境間切換時，也需透過環境變數來確保其穩定與彈性。本文將深入探討 Vite 環境變數的設定與應用。

Vite 系統環境變數設定

Vite 是下一代高效的前端模組打包工具，背後直接使用 ESM 所以可以達到快速即時的開發體驗，在 JavaScript 生態系中提供極佳開發體驗。但也由於是 ESM 的關係，處理環境變數上的設定有些許不同。

尤其是在 CI/CD 流程中，自動化部署時通常會透過 pipeline 設定環境變數，但這樣的設定就和 Vite 本身直接支援的方式略有落差。

Vite 環境變數的設定主要有兩種做法：使用 Vite 內建機制或是直接讀取 pipeline 上的系統環境變數。

Vite 內建的環境變數處理方式，參考下面的連結，關鍵就是依照環境多寫一份 .env 檔案，像是 .env.production、.env.staging，並在執行時搭配 --mode staging。環境變數中的 Key 需要用 VITE 開頭（例如 VITE_SOME_KEY），最後就可以用特殊的全域變數使用 import.meta.env.VITE_SOME_KEY 來使用。

https://vitejs.dev/guide/env-and-mode.html#node-env-and-modes

透過 Vite 內建函式讀取系統的環境變數，並透過 ESM define 成全域變數，這個方式就不用額外再定義環境檔

https://vitejs.dev/config/#using-environment-variables-in-config

1
2
3
4
5
6
7
8
9
10
11
12
13

import { defineConfig, loadEnv } from "vite";

export default defineConfig(({ command, mode }) => {
  // Load env file based on `mode` in the current working directory.
  // Set the third parameter to '' to load all env regardless of the `VITE_` prefix.
  const env = loadEnv(mode, process.cwd(), "");
  return {
    // vite config
    define: {
      __APP_ENV__: JSON.stringify(env.APP_ENV),
    },
  };
});

但因為是透過 ESBuild 的 define 成全域變數關係，所以如果是使用 TypeScript 需要額外進行底下設定，才不會出現錯誤警告。

https://vitejs.dev/config/shared-options.html#define

1
2

// vite-env.d.ts
declare const __APP_VERSION__: string;

最後，所有定義好的環境變數都能直接在 前端 應用程式中使用了。

• ← 上一篇
• 下一篇 →