uni-app 微信小程序报错：ReferenceError: process is not defined

发布于 1周前 作者 h691938207 来自 Uni-App

uni-app 微信小程序报错：ReferenceError: process is not defined

问题描述

vue3开发
通过hbuild直接打包/发行小程序，页面打不开，网上也查了一些案例，但是解决比较麻烦，请问有过类似经验的朋友吗？你们都怎么解决的。hbuild，小程序开发者工具都是最新的

报错：

app.js错误:
ReferenceError: process is not defined
at Mime.define (vendor.js? [sm]:16012)
at vendor.js? [sm]:16041
at require (WASubContext.js?t=wechat&s=1724917553847&v=2.15.0:2)
at r (WASubContext.js?t=wechat&s=1724917553847&v=2.15.0:2)
at app.js? [sm]:3
at require (WASubContext.js?t=wechat&s=1724917553847&v=2.15.0:2)
at appservice.js:7
at e.doWhenAllScriptLoaded (getmainpackage.js:16817)
at h (WASubContext.js?t=wechat&s=1724917553847&v=2.15.0:2)
at WASubContext.js?t=wechat&s=1724917553847&v=2.15.0:2(env: macOS,mp,1.06.2405020; lib: 2.15.0)

WAServiceMainContext.js:2 Uncaught FrameworkError
process is not defined
ReferenceError: process is not defined
at Mime.define (http://127.0.0.1:28082/appservice/common/vendor.js:18036:7)
at http://127.0.0.1:28082/appservice/common/vendor.js:18067:6
at require (http://127.0.0.1:28082/appservice/_dev_/WASubContext.js?t=wechat&s=1724917553847&v=2.15.0:2:2369957)
at r (http://127.0.0.1:28082/appservice/_dev_/WASubContext.js?t=wechat&s=1724917553847&v=2.15.0:2:2368549)
at http://127.0.0.1:28082/appservice/app.js:7:21
at require (http://127.0.0.1:28082/appservice/_dev_/WASubContext.js?t=wechat&s=1724917553847&v=2.15.0:2:2369957)
at ide:///package/_APP_/appservice.js:7:9
at e.doWhenAllScriptLoaded (ide:///getmainpackage.js:16817:21)
at h (http://127.0.0.1:28082/appservice/_dev_/WASubContext.js?t=wechat&s=1724917553847&v=2.15.0:2:120638)
at http://127.0.0.1:28082/appservice/_dev_/WASubContext.js?t=wechat&s=1724917553847&v=2.15.0:2:121463(env: macOS,mp,1.06.2405020; lib: 2.15.0)

Harmonyos Next教程
1 回复

在开发uni-app微信小程序时遇到ReferenceError: process is not defined错误，通常是因为代码中使用了Node.js环境中的process全局对象，而微信小程序运行环境中并不存在这个对象。process对象主要用于Node.js环境，提供有关当前Node.js进程的信息，并控制其行为。

为了解决这个问题，你需要检查并修改代码，确保不在微信小程序中使用process对象。以下是一些可能的解决方案和代码示例：

1. 检查并移除process的使用

首先，你需要定位到代码中所有使用process的地方。这通常发生在直接引用process变量或者在某些第三方库中。

示例：

假设你有以下代码：

if (process.env.NODE_ENV === 'production') {
  // 生产环境代码
}

在微信小程序中，你应该使用uni-app提供的环境变量来判断环境，而不是process.env。uni-app提供了uni.getSystemInfoSync()来获取系统信息，但通常不直接提供环境变量。对于环境变量的处理，你可以在编译阶段通过配置文件或脚本注入。

2. 使用条件编译

uni-app支持条件编译，你可以利用这一点来处理不同环境下的代码。

示例：

在pages/index/index.vue中：

<script>
export default {
  #ifdef H5
  mounted() {
    console.log('This is H5 platform');
  }
  #else
  onLoad() {
    console.log('This is not H5, possibly WeChat Mini Program');
  }
  #endif
}
</script>

注意：这里的条件编译示例主要用于区分H5和其他平台，对于微信小程序特定的环境变量处理，你可能需要在构建脚本中设置。

3. 配置webpack或vite等构建工具（如果适用）

如果你在使用webpack或vite等现代前端构建工具，并且这些工具参与了uni-app的构建过程，你可以通过配置这些工具来定义环境变量。

webpack示例：

在webpack.config.js中：

module.exports = {
  // ...
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
    })
  ]
  // 注意：这里的定义实际上在微信小程序中仍然无效，仅作为示例
};

但请记住，对于微信小程序，上述webpack配置是无效的，因为微信小程序不直接支持webpack。

总之，处理process is not defined错误的关键在于识别并移除或替换所有对process的引用，确保代码兼容微信小程序的环境。

回到顶部