修復reactjs的vite錯誤 - 全域未定義且進程未定義

在您正在為專案執行帶有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.* 的程式碼中取得環境變量，沒有它也能正常運作。

編碼愉快！

以上是修復reactjs的vite錯誤 - 全域未定義且進程未定義的詳細內容。更多資訊請關注PHP中文網其他相關文章！