Vite 系統環境變數 從把妹角度理解前後端如何和平相處

環境變數對於一個系統來說是非常重要的，以把妹來說同樣的男生遇到不同的妹子時，腦中需要即時套用不同的參數來做出對應的表現來不被抓包自己是海王。

系統在設計和規劃的時候，當然也需要經過環境變數的設計來讓同樣一套系統能夠應對測試、UAT、Production 環境的情境。

Vite 系統環境變數設定

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

通常在跑 CICD 的過程中，我們會在 pipeline 上設定環境變數，但這樣的設定就和 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;

最後都定義成全域變數後就直接使用了。

• 下一篇 →