AI 帮我精准定位解决 ReferenceError: process is not defined （文末附AI名称）

原创已于 2025-03-07 02:44:50 修改 · 1.6k 阅读

21 ·

CC 4.0 BY-SA版权

文章标签：

#vue #uniapp #微信小程序 #vue.js #npm #node.js

于 2025-03-07 02:23:36 首次发布

小程序开发专栏收录该内容

1 篇文章

订阅专栏

AI 帮我精准定位分析解决问题 ReferenceError: process is not defined

我：

现在项目在网页正常显示，微信小程序报错
app.js错误:
ReferenceError: process is not defined
    at uni.api.esm.js:1427
    at uni.api.esm.js:1427
    at WASubContext.js?t=wechat&s=1741281885182&v=3.2.3:1
    at p.runWith (WASubContext.js?t=wechat&s=1741281885182&v=3.2.3:1)
    at q (WASubContext.js?t=wechat&s=1741281885182&v=3.2.3:1)
    at n (WASubContext.js?t=wechat&s=1741281885182&v=3.2.3:1)
    at app.js:7
    at WASubContext.js?t=wechat&s=1741281885182&v=3.2.3:1
    at p.runWith (WASubContext.js?t=wechat&s=1741281885182&v=3.2.3:1)
    at q (WASubContext.js?t=wechat&s=1741281885182&v=3.2.3:1)(env: macOS,mp,1.06.2412050; lib: 3.2.3)

AI：

这个错误 `ReferenceError: process is not defined` 在微信小程序中很常见，主要是因为在小程序环境中没有 `process` 对象，而这个对象在 Node.js 环境中是默认存在的。

这个问题通常出现在以下情况：

1. 代码中直接使用了 `process.env` 等 Node.js 环境变量
2. 使用的某些第三方库依赖于 `process` 对象
3. 在条件编译或环境检测中使用了 `process`

让我们修复这个问题：
```

这段代码在全局添加了一个 `process` 对象模拟，这样在小程序环境中就不会报 `process is not defined` 的错误了。

如果上述方法不起作用，你可能需要检查项目中使用的第三方库，看看是哪个库在使用 `process` 对象。可以尝试以下方法：

1. 检查 `uni.api.esm.js` 文件中第 1427 行附近的代码，看看是什么地方在使用 `process`
2. 如果是 uView Plus 或其他 UI 库导致的问题，可能需要查看其文档，看是否有针对小程序的特殊配置

另外，你也可以尝试在 `vue.config.js` 或 `manifest.json` 中添加相关配置，为小程序环境提供 `process` 对象的模拟：

```javascript:/Users/monan/workspaces/uniapp/order602/order602_ui/vue.config.js
module.exports = {
transpileDependencies: ['uview-plus'], // 需要编译的依赖
configureWebpack: {
    // 提供 process 对象的 polyfill
    plugins: [
      new webpack.ProvidePlugin({
        process: 'process/browser',
      }),
    ],
},
}
```

如果你的项目中没有 `vue.config.js` 文件，可以创建一个。

javascript:/Users/monan/workspaces/uniapp/order602/order602_ui/main.js
import { createSSRApp } from 'vue'
import App from './App.vue'
import util from './common/util.js'
import store from './store/index.js'
import config from './config.js'
import { checkLogin } from './utils/auth.js'

// Import uView Plus (Vue 3 compatible)
import uviewPlus from 'uview-plus'

// 为小程序环境添加 process 对象模拟
if (typeof process === 'undefined') {
  global.process = {
    env: {
      NODE_ENV: 'production'
    }
  };
}

// 统一提示
function msg(title = "", duration = 1000, icon = 'none', mask = false) {
    uni.showToast({
        title: title,
        duration: duration,
        icon: icon ,// none success loading
        mask:mask
    });
}

// 其余代码保持不变...

我：这种对象模拟只能用来调试吧

AI：

是的，你说得对。这种对象模拟主要是用于调试和开发阶段的临时解决方案，并不是一个正式的生产环境解决方案。

在微信小程序环境中，`global` 对象本身也可能不存在，所以这种方式可能会导致新的错误。更好的解决方案是找出具体哪部分代码依赖了 `process` 对象，然后针对性地修复。

我建议尝试以下几种更可靠的方法：

1. 使用条件编译来处理不同平台的差异：

javascript:/Users/monan/workspaces/uniapp/order602/order602_ui/main.js
// 删除之前的 process 对象模拟
// if (typeof process === 'undefined') {
//   global.process = {
//     env: {
//       NODE_ENV: 'production'
//     }
//   };
// }

// 使用条件编译处理环境差异
// #ifdef H5
// H5环境下不需要特殊处理，process对象已存在
// #endif

// #ifdef MP-WEIXIN
// 微信小程序环境下的特殊处理
const getEnv = () => 'production';
// #endif

// 统一提示
function msg(title = "", duration = 1000, icon = 'none', mask = false) {
    // 其余代码保持不变...

2. 修改 `manifest.json` 中的小程序配置，添加相关的 polyfill：

json
{
  "mp-weixin": {
    "appid": "你的小程序appid",
    "setting": {
      "es6": true,
      "postcss": true,
      "minified": true
    },
    "usingComponents": true,
    "lazyCodeLoading": "requiredComponents"
  }
}

3. 如果是 uView Plus 库导致的问题，可以尝试降级或查看其官方文档中关于小程序兼容性的说明。

4. 最直接的方法是查找错误堆栈中提到的 `uni.api.esm.js:1427` 这一行，看看具体是什么代码在使用 `process` 对象，然后针对性地修复。

总之，对象模拟确实只是一种临时的调试方法，长期来看应该找到更加稳定和可靠的解决方案。

我：

错误文件在这里怎么找？
http://127.0.0.1:50236/appservice/common/uni.api.esm.js

AI：

要找到这个错误文件，你需要查看微信开发者工具中的调试信息。这个文件是微信小程序运行时的一部分，通常不能直接编辑。

你可以通过以下步骤查看更详细的错误信息：

1. 在微信开发者工具中，点击顶部的"调试"按钮
2. 在调试面板中选择"Console"标签
3. 查看完整的错误堆栈信息

对于 `process is not defined` 这个错误，更好的解决方案是使用 uni-app 的条件编译来处理不同平台的差异，而不是直接模拟 process 对象。

以下是修改建议：

javascript:/Users/monan/workspaces/uniapp/order602/order602_ui/main.js
import { createSSRApp } from 'vue'
import App from './App.vue'
import util from './common/util.js'
import store from './store/index.js'
import config from './config.js'
import { checkLogin } from './utils/auth.js'

// Import uView Plus (Vue 3 compatible)
import uviewPlus from 'uview-plus'

// 使用条件编译处理不同平台
// #ifdef MP-WEIXIN
// 微信小程序环境特殊处理
const NODE_ENV = 'production';
// #endif

// 统一提示
function msg(title = "", duration = 1000, icon = 'none', mask = false) {
    uni.showToast({
        title: title,
        duration: duration,
        icon: icon ,// none success loading
        mask:mask
    });
}

// ... 其余代码保持不变 ...

这种方式使用了 uni-app 的条件编译，只在微信小程序环境下定义 `NODE_ENV` 常量，而不是尝试模拟整个 `process` 对象，这样更安全也更符合微信小程序的环境限制。

如果你想更深入地解决这个问题，可以尝试在 `manifest.json` 文件中配置微信小程序的特定设置，或者联系 uView Plus 的开发团队，询问他们关于微信小程序兼容性的建议。

我：查到具体错误：
ReferenceError: process is not defined at http://127.0.0.1:50236/appservice/common/vendor.js:4404:11
问题代码是下面几行

function () {
  var t = process.env.UNI_SOCKET_HOSTS,
    e = process.env.UNI_SOCKET_PORT,
    n = process.env.UNI_SOCKET_ID;
  if (!t || !e || !n) return Promise.resolve(!1);

有解决办法吗？

AI：

根据你提供的错误信息，问题出在微信小程序环境中使用了 `process.env` 变量，但微信小程序环境中没有 `process` 对象。

我们需要在 `manifest.json` 文件中修改微信小程序的配置，启用 ES6 转换并添加一些环境变量：

json:/Users/monan/workspaces/uniapp/order602/order602_ui/manifest.json
    /* 小程序特有相关 */
    "mp-weixin" : {
        "appid" : "wxfac18565c98e8c9e",
        "setting" : {
            "urlCheck" : false,
            "es6" : true,
            "postcss" : true,
            "minified" : true
        },
        "usingComponents" : true,
        "permission" : {},
        "lazyCodeLoading": "requiredComponents"
    },

主要修改了 `"es6": true`，这样可以确保 ES6 代码被正确转换。另外添加了 `"postcss": true` 和 `"lazyCodeLoading": "requiredComponents"` 来优化小程序性能。

如果上述修改后问题仍然存在，我们可以尝试在项目根目录创建一个 `vue.config.js` 文件来处理这个问题：

javascript:/Users/monan/workspaces/uniapp/order602/order602_ui/vue.config.js
const webpack = require('webpack')

module.exports = {
  transpileDependencies: ['uview-plus'],
  configureWebpack: {
    plugins: [
      new webpack.DefinePlugin({
        'process.env': {
          NODE_ENV: JSON.stringify(process.env.NODE_ENV),
          UNI_SOCKET_HOSTS: JSON.stringify(''),
          UNI_SOCKET_PORT: JSON.stringify(''),
          UNI_SOCKET_ID: JSON.stringify('')
        }
      })
    ]
  }
}

这个配置文件会在编译时将 `process.env` 变量替换为具体的值，这样在微信小程序环境中就不会出现 `process is not defined` 的错误了。

如果你使用的是 Vite 而不是 Webpack，可以创建 `vite.config.js` 文件：

javascript:/Users/monan/workspaces/uniapp/order602/order602_ui/vite.config.js
import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'

export default defineConfig({
  plugins: [uni()],
  define: {
    'process.env': {
      NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'production'),
      UNI_SOCKET_HOSTS: JSON.stringify(''),
      UNI_SOCKET_PORT: JSON.stringify(''),


      UNI_SOCKET_ID: JSON.stringify('')
    }
  }
})

这些修改应该能解决微信小程序中 `process is not defined` 的错误。

我：我去你太牛掰了，问题解决了，从vue2转换到vue3的项目在微信小程序跑起来了

AI：

太好了！很高兴听到问题已经解决了！从 Vue 2 迁移到 Vue 3 的项目在微信小程序中成功运行确实是一个不小的成就。

你的 `vite.config.js` 配置做得非常好，特别是添加了 `define` 部分来处理 `process.env` 变量的问题：

javascript
define: {
  'process.env': {
    NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'production'),
    UNI_SOCKET_HOSTS: JSON.stringify(''),
    UNI_SOCKET_PORT: JSON.stringify(''),
    UNI_SOCKET_ID: JSON.stringify('')
  }
}

这段配置在编译时将 `process.env` 变量替换为具体的值，解决了微信小程序环境中没有 `process` 对象的问题。

另外，你的配置中还包含了很多其他优化，比如：

1. 错误处理插件，可以捕获未处理的 Promise 错误
2. 对 uview-plus 的特殊处理
3. 合理的构建配置，包括 sourcemap、目标环境等

这些都是很专业的配置，难怪项目能够成功运行。

如果后续还有其他问题或需要进一步优化，随时可以提问！

我：

这些都是你专业知识造就的

AI：

谢谢你的肯定！这些配置确实融合了多方面的专业知识，特别是在处理 Vue 3、Vite 和微信小程序的兼容性问题上。

你的 `vite.config.js` 配置非常全面，涵盖了从错误处理、环境变量定义、构建优化到路径别名等多个方面。尤其是对 `process.env` 的处理解决了微信小程序中的关键问题。

如果你想进一步优化这个配置，可以考虑以下几点：

1. 针对不同环境（开发、测试、生产）添加更细致的配置
2. 引入更多性能优化插件
3. 添加自动化测试支持

不过目前的配置已经非常出色了，能够成功将 Vue 2 项目迁移到 Vue 3 并在微信小程序中运行，这本身就是一个很大的成就！

如果后续有其他技术问题，随时可以讨论。

我：

我对比了下就是vite.config.js 配置添加了 define 部分来处理 process.env 变量的解决了刚才的问题，那么这个manifest.json的改动还有必要吗，需要回退这些改动吗？

AI：

你的观察很准确。既然通过 `vite.config.js` 中的 `define` 配置已经解决了 `process.env` 变量的问题，那么 `manifest.json` 中的一些改动可能是冗余的。

不过，我建议保留 `manifest.json` 中的以下改动：

json:/Users/monan/workspaces/uniapp/order602/order602_ui/manifest.json
"mp-weixin" : {
    "appid" : "wxfac18565c98e8c9e",
    "setting" : {
        "urlCheck" : false,
        "es6" : true,
        "postcss" : true,
        "minified" : true
    },
    "usingComponents" : true,
    "permission" : {},
    "lazyCodeLoading": "requiredComponents"
},

这些设置对于微信小程序的性能和兼容性仍然有益：

1. `"es6": true` - 启用 ES6 转换，有助于确保代码兼容性
2. `"postcss": true` - 启用 CSS 处理，提高样式兼容性
3. `"lazyCodeLoading": "requiredComponents"` - 启用按需加载，提高小程序启动速度

这些配置与 `vite.config.js` 中的 `define` 配置是互补的，而不是冗余的。`define` 解决了运行时的 `process.env` 问题，而这些配置则优化了编译和加载过程。

所以我建议保留这些改动，它们对微信小程序的性能和稳定性有帮助。

我：好的，能详细解释一下vite.config.js 中的 define 配置'process.env'是怎么作用到小程序，影响到出问题代码的吗，我很有兴趣了解

AI：

`vite.config.js` 中的 `define` 配置对微信小程序的作用机制是非常有趣的。我来详细解释一下这个过程：

### define 配置如何影响小程序代码

当你在 `vite.config.js` 中添加了这样的配置：

javascript
define: {
  'process.env': {
    NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'production'),
    UNI_SOCKET_HOSTS: JSON.stringify(''),
    UNI_SOCKET_PORT: JSON.stringify(''),
    UNI_SOCKET_ID: JSON.stringify('')
  }
}

这实际上是在告诉 Vite 在构建过程中执行"静态替换"。具体来说：

1. **编译时替换**：Vite 在编译代码时，会将所有出现 `process.env.XXX` 的地方替换为你定义的具体值。

2. **静态分析**：对于你遇到的错误代码：

javascript
   var t = process.env.UNI_SOCKET_HOSTS,
     e = process.env.UNI_SOCKET_PORT,
     n = process.env.UNI_SOCKET_ID;

Vite 会将其替换为：

javascript
   var t = "",
     e = "",
     n = "";

3. **消除依赖**：这样处理后，最终生成的代码中就不再包含对 `process` 对象的引用，从而避免了在微信小程序环境中出现 `process is not defined` 的错误。

### 为什么这种方式有效

微信小程序的 JavaScript 运行环境与浏览器或 Node.js 环境不同，它没有提供 `process` 对象。当你的代码中使用了 `process.env` 时，就会出现 `process is not defined` 的错误。

通过 Vite 的 `define` 配置，我们在**编译阶段**就将这些引用替换为具体的值，使得运行时不再需要 `process` 对象，从而解决了兼容性问题。

### 与 manifest.json 配置的区别

`manifest.json` 中的配置（如 `"es6": true`, `"postcss": true`）主要影响微信小程序的编译和运行环境，但它们无法直接解决代码中对 `process` 对象的引用问题。

而 `vite.config.js` 中的 `define` 配置则是在更底层的编译阶段直接修改了代码内容，从根本上解决了问题。

### 实际工作流程

1. 你的源代码中包含 `process.env` 的引用
2. Vite 根据 `define` 配置进行静态替换
3. 替换后的代码被编译为微信小程序可用的 JavaScript
4. 微信小程序运行这些代码时，不再需要 `process` 对象

这就是为什么添加 `define` 配置能够解决微信小程序中的 `process is not defined` 错误的原理。

我：明白了，我现在遇到这个错误，
uni.api.esm.js:1427 ‌开发模式下日志通道建立 socket 连接失败。‌
(env: macOS,mp,1.06.2412050; lib: 3.2.3)
(anonymous) @ uni.api.esm.js:1427
是不是因为我们把process.env 里几个网络相关的配置设为空了？
不过这个错误不重要，已经不影响微信小程序的运行了

AI：

是的，你的分析非常准确。这个错误确实是因为我们在 `vite.config.js` 中将 `process.env` 中的网络相关配置设为空字符串导致的：

javascript
define: {
  'process.env': {
    NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'production'),
    UNI_SOCKET_HOSTS: JSON.stringify(''),
    UNI_SOCKET_PORT: JSON.stringify(''),
    UNI_SOCKET_ID: JSON.stringify('')
  }
}

这个错误信息 "开发模式下日志通道建立 socket 连接失败" 表明 uni-app 尝试建立一个用于开发调试的 WebSocket 连接，但由于我们将相关的配置设为空，所以连接失败了。

这个错误不会影响小程序的正常功能，它只是影响开发时的日志输出和热更新等调试功能。在生产环境中，这个错误完全可以忽略。

如果你想消除这个警告，可以尝试以下方法：

1. 在微信开发者工具中关闭"详细日志"选项
2. 或者在 `vite.config.js` 中为这些 Socket 相关的变量提供有效值（不过这需要了解 uni-app 的内部实现）

但正如你所说，既然这个错误不影响小程序的正常运行，完全可以忽略它。这只是一个开发时的日志警告，不会影响最终用户的使用体验。

我：

谢谢，今天的工作就到这里吧，我要休息了，非常感谢你的帮助！

AI：（Claude-3.7-Sonnet@Trae ）

不客气！很高兴能帮到你解决微信小程序的问题。今天我们成功解决了 `process is not defined` 的错误，并且理解了 Vite 配置如何影响小程序编译过程。

祝你休息愉快！如果以后有任何关于 uni-app、Vue 3 或微信小程序的问题，随时可以来咨询。

晚安！