vue3+vite4使用mqtt协议遇到的问题

        介绍一下mqtt协议，是一种基于发布/订阅模式的 轻量级物联网消息传输协议。该协议提供了一对多的消息分发和应用程序的解耦，具备很小的传输消耗和协议数据交换、最大限度减少网络流量和三种不同消息服务质量等级，满足不同投递需求的优势

如何在 Vue 项目中使用 MQTT | EMQ

因为浏览器环境不同，我测试了俩个版本（4.3.7、3.0.0），这些下载量高的都不一定稳定，（发布之后不能再发布第二条消息），最好下载2.18.8版本

首先，在项目中下载mqtt

npm install mqtt --save
//或者
npm install mqtt@2.18.8

1.这是遇到的第一个问题（2.18.8版本没有遇到）

Uncaught RangeError: Maximum call stack size exceeded
    at Function.from ()
    at clone (index.js:42:59)
    at cloneArray (index.js:31:17)
    at clone (index.js:40:34)
    at clone (index.js:58:17)
    at cloneArray (index.js:31:17)
    at clone (index.js:42:42)
    at cloneArray (index.js:31:17)
    at clone (index.js:40:34)
    at clone (index.js:58:17)

这个就是表示调用栈溢出。这通常是由于递归函数的无限循环或递归调用导致的。 根据错误信息，问题可能出现在一个名为clone的函数中，该函数在index.js文件的不同位置被调用。具体俺也不太懂，解决方法就是换成2.18.8版本

2.第二个问题：eferenceError: Buffer is not defined

eferenceError: Buffer is not defined
    at node_modules/mqtt-packet/constants.js (constants.js:46:34)
    at __require (chunk-AC2VUBZ6.js?v=50ed34aa:11:50)
    at node_modules/mqtt-packet/parser.js (parser.js:4:19)
    at __require (chunk-AC2VUBZ6.js?v=50ed34aa:11:50)
    at node_modules/mqtt-packet/mqtt.js (mqtt.js:1:18)
    at __require (chunk-AC2VUBZ6.js?v=50ed34aa:11:50)
    at node_modules/mqtt/lib/client.js (client.js:10:20)
    at __require (chunk-AC2VUBZ6.js?v=50ed34aa:11:50)
    at node_modules/mqtt/lib/connect/index.js (index.js:3:20)
    at __require (chunk-AC2VUBZ6.js?v=50ed34aa:11:50)

在Vue 3 + Vite 4项目中，由于Node.js的全局对象Buffer在浏览器环境中不可用，所以会报错ReferenceError: Buffer is not defined。解决该问题的方法是使用browserify-zlib库来兼容浏览器环境。
解决方法：

//安装browserify-zlib库
npm install browserify-zlib


//在main.js/main.ts中引入browserify-zlib库，并设置全局对象Buffer。
import { Buffer } from 'buffer';
import zlib from 'browserify-zlib';
global.Buffer = Buffer;
global.Zlib = zlib.Zlib;


//vite.config.js/vite.config.ts中

export default {
  // ...
  define: {
    'process.env': {},
  },
};

之后可能会引发第三个问题。

3.第三个问题：Uncaught ReferenceError: global is not defined at main.ts:21:1
在浏览器环境中，global对象是不可用的，所以会报错Uncaught ReferenceError: global is not defined。

将第二个问题引入main.ts或者main.js中的global改成window

import { Buffer } from 'buffer';
import zlib from 'browserify-zlib';
window.Buffer = Buffer;
window.Zlib = zlib.Zlib;

4.第四个问题：和第三个问题一样global is not defined，但是版本是2.18.8

解决方法：

在/src下面新建一个文件，我这里文件名叫polyfills.ts
写入下面几行代码，保存

//polyfills.ts
if (typeof (window as any).global === 'undefined') {
    ;(window as any).global = window
  }

之后在main.ts/main.js中引入，一定要在import { createApp } from "vue"前面

// main.ts
import "./polyfills"; // 注意要在createApp 的前面

5.第五个问题 process is not defined

解决方法：

//在vite.config.ts中增加
export default defineConfig({
  // ...
  define: {
    'process.env': {}
  }
})

最后，再附上我现在2.18.8不报错的效果图，和还有几行代码

 这几行代码不能少，一少也报错，关于buffer和process ,我这里另外下载了buffer和process 。

//main.ts/main.js

import { Buffer } from "buffer";
import process from "process";
window.process = process;
window.Buffer = Buffer;

6.第六个问题,实在js加vite4和vue3遇到的

报错是

TypeError: Cannot read properties of undefined (reading 'from')
    at node_modules/readable-stream/node_modules/safe-buffer/index.js (index.js:11:12)
    at __require (chunk-UXIASGQL.js?v=11ee931e:8:50)
    at node_modules/readable-stream/lib/_stream_readable.js (_stream_readable.js:55:14)
    at __require (chunk-UXIASGQL.js?v=11ee931e:8:50)
    at node_modules/readable-stream/readable-browser.js (readable-browser.js:1:28)
    at __require (chunk-UXIASGQL.js?v=11ee931e:8:50)
    at node_modules/mqtt/lib/store.js (store.js:8:16)
    at __require (chunk-UXIASGQL.js?v=11ee931e:8:50)
    at node_modules/mqtt/lib/client.js (client.js:7:13)
    at __require (chunk-UXIASGQL.js?v=11ee931e:8:50)

解决方法是将mqtt引入改一下

import mqtt from 'mqtt/dist/mqtt.min'