在您正在為專案執行帶有reactjs範本的vite應用程式並嘗試從.env檔案中取得環境變數的場景中。從 .env 取得環境變數的流行方法是使用 process.env.SOMETHING 作為變數：

SOMETHING=SECRETSAUCE

此時 vite.config.ts 看起來像：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
})

但是在vite中取得變數並不能立即起作用，有很多方法可以解決這個問題。我嘗試了其中的大部分，我覺得堅持簡單直接的方式。

可能使用上面的定義和 process.env.* 的預設獲取邏輯，你會得到錯誤 Uncaught ReferenceError: global is not Defined。

我在 stackoverflow 中找到了很多參考資料，但我很困惑。

錯誤的修復是在配置中定義全局，如下所示。

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  define: {
    global: {},
  },
})

現在，這可能會導致另一個更常見的錯誤 Uncaught ReferenceError: process is not Defined。

同樣，網路上有許多解決方案，有些已經過時了。我發現最相關且最容易實現的是從 vite 庫導入 loadEnv 並建立自訂邏輯，如下所示。

import { defineConfig, loadEnv } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), '');
  return {
    define: {
      global: {},
      'process.env': env
    },
    plugins: [react()],
  }
})

魔法立刻發生了！

還要提一下，我們不需要使用 dotenv 依賴項作為在具有 process.env.* 的程式碼中獲取環境變量，沒有它也可以很好地工作。

編碼愉快！