在您正在為專案執行帶有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中文網其他相關文章！
