使用Vite时出现Uncaught ReferenceError: process is not defined错误求助

这个错误是因为你在前端环境里引入了Cloudinary的Node.js专用SDK，而浏览器中不存在Node.js的process全局对象，SDK内部代码尝试访问process导致报错——哪怕你前端没直接用process.env，SDK本身依然会依赖这个对象。

下面是几种可行的解决办法：

1. 改用Cloudinary前端专用SDK（推荐） #

Node版本的cloudinary包是给后端设计的，前端应该使用专门适配浏览器的SDK：

• 先在前端项目中卸载后端包：npm uninstall cloudinary
• 安装前端适配的官方包，比如React集成包或基础工具包：

  npm install @cloudinary/react @cloudinary/url-gen
  

• 之后按照前端SDK文档实现上传，比如使用Cloudinary Upload Widget，或是直接通过前端SDK发起上传请求，全程无需依赖process对象。

2. 在构建工具中模拟process对象（临时兼容） #

如果暂时不想更换SDK，可以在前端构建工具中定义一个空的process.env对象规避报错：

• Vite项目：修改vite.config.js

  import { defineConfig } from 'vite'
  
  export default defineConfig({
    define: {
      'process.env': {}
    }
  })
  

• Webpack项目：修改webpack.config.js

  const webpack = require('webpack');
  
  module.exports = {
    plugins: [
      new webpack.DefinePlugin({
        'process.env': JSON.stringify({})
      })
    ]
  };
  

⚠️ 注意：这种方法仅能绕开报错，如果SDK需要从process.env读取Cloudinary密钥，绝对不能在前端配置——密钥会直接暴露给所有用户，存在严重安全隐患。

3. 通过后端代理上传（最安全） #

将上传逻辑完全放在后端处理：

• 前端将文件通过API发送到你的后端接口
• 后端使用已配置好process.env的cloudinary包完成上传操作
• 后端把Cloudinary返回的文件URL回传给前端
  这种方式下前端完全不需要接触Cloudinary SDK，既解决了process未定义的报错，又能保护你的Cloudinary密钥不被泄露。

内容的提问来源于stack exchange，提问作者Yasir Mukhtar