”工欲善其事,必先利其器。“—孔子《论语.录灵公》
首页 > 编程 > 修复reactjs的vite错误 - 全局未定义且进程未定义

修复reactjs的vite错误 - 全局未定义且进程未定义

发布于2024-11-02
浏览:442

Fixing vite error for reactjs - global is not defined and process is not defined

在您正在为项目运行带有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.* 的代码中获取环境变量,没有它也可以很好地工作。

编码愉快!

版本声明 本文转载于:https://dev.to/rajinh24/fixing-vite-error-for-reactjs-global-is-not-defined-and-process-is-not-defined-4ffo?1如有侵犯,请联系[email protected]删除
最新教程 更多>

免责声明: 提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发到邮箱:[email protected] 我们会第一时间内为您处理。

Copyright© 2022 湘ICP备2022001581号-3