最近在做一个 vite4.x + react18 的项目,需要引入 mqtt.js , 基操直接引入

import mqtt from 'mqtt'
结果浏览器直接报错 Uncaught ReferenceError: Buffer is not defined.
 首先想到的是不是 mqtt.js 库不能用在浏览器上,可能是需要 node 环境?
 头大,但是以前用 vue 2 的时候没有出现过这种问题.
 然后各种百度, 各种刁难 gpt ,出来的解决方案都试了,没有啥用.
 然后上 vite 的 github 查看 issue, 里面是各种加 vite 配置和 polyfill 插件,大概试了一遍,但是还是发现对我目前的项目没有生效.
 后面破罐子破摔, 想了想, 直接进 node_modules 查看一下啥问题,发现有一个 dist 目录, 而且里面有 mqtt.js 文件和 mqtt.min.js ,就想着直接引用.于是修改了引入方式
 
import * as mqtt from 'mqtt/dist/mqtt.min';
结果就可以了…
 今天真是投机取巧的一天啊…
在页面中使用了Buffer，但是浏览器中JS没有Buffer对象，它是存在Node中。
将Buffer对象改用ArrayBuffer对象，ArrayBuffer对象是 ES6 才写入标准的。浏览器原生提供ArrayBuffer()构造函数，用来生成实例。它接受一个整数作为参数，表示这段二进制数据占用多少个字节。
接口返回结果：
改写后的下载方法：
func
				
Vue-CLI项目中引用mqtt.js 报错，Buffer is not defined
原因是因为没有在vue.config.js中配置ProvidePlugin
// vue.config.js
configureWebpack: {
	plugins: [
		new webpack.ProvidePlugin({
			process: 'process/browser', 
			Buffer: ['buffer', 'Buffer']
Github
				
这个错误是由于Vue项目中缺少Buffer对象导致的。amqplib库在运行时需要使用Buffer对象来处理二进制数据，而在Vue项目中，Buffer对象可能没有被正确引入。
解决方法有两种：
在main.js文件中引入Buffer对象，如：global.Buffer = global.Buffer || require('buffer').Buffer
2.在webpack.config...
在页面中使用了Buffer，但是浏览器中JS没有Buffer对象，它是存在Node中。
将Buffer对象改用ArrayBuffer对象，ArrayBuffer对象是 ES6 才写入标准的。浏览器原生提供ArrayBuffer()构造函数，用来生成实例。它接受一个整数作为参数，表示这段二进制数据占用多少个字节。
接口返回结果：
改写后的下载方法：
func