整合MQTT 5.x 在uni-app中失败

整合MQTT 5.x 在uni-app中失败

测试过的手机：

华为Mate 9

操作步骤：

  • 安装mqtt
npm i mqtt
  • index.vue中引入mqtt
<script>  
import mqtt from "mqtt"  
</script>
  • 启动应用后，页面无法进入。也不报错

预期结果：

  • 显示index.vue的页面效果

实际结果：

  • 页面不显示，控制台也不报错。

bug描述：

  • 安装mqtt
npm i mqtt
  • index.vue中引入mqtt
<script>  
import mqtt from "mqtt"  
</script>
  • 启动应用后，页面无法进入。也不报错

更多关于整合MQTT 5.x 在uni-app中失败的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于整合MQTT 5.x 在uni-app中失败的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app中使用MQTT 5.x时遇到页面无法加载的问题，主要是由于uni-app的运行环境限制导致的。以下是关键点分析：

  1. 环境兼容性问题：
  • MQTT.js是Node.js环境的库，直接在前端使用会遇到兼容性问题
  • uni-app的H5和小程序环境与Node.js环境差异较大
  1. 解决方案： 推荐使用uni-app兼容的MQTT客户端库：
// 使用uniapp-mqtt
import mqtt from 'uniapp-mqtt'

// 或者使用MQTT.js的浏览器版本
import mqtt from 'mqtt/dist/mqtt.min.js'
  1. 配置调整： 需要在vue.config.js中添加webpack配置：
configureWebpack: {
  resolve: {
    fallback: {
      "net": false,
      "tls": false,
      "fs": false
    }
  }
}
回到顶部