Vue集成MQTT.js报错Uncaught ReferenceError: Buffer is not defined求助

1. 解决Uncaught ReferenceError: Buffer is not defined错误 #

浏览器环境默认没有Node.js的Buffer对象，即便安装了buffer包，也需要通过构建工具将其注入为全局变量，分两种项目类型处理：

Vue CLI（Webpack）项目 #

在项目根目录创建/修改vue.config.js：

const webpack = require('webpack')

module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        Buffer: ['buffer', 'Buffer'],
      }),
    ],
    resolve: {
      fallback: {
        buffer: require.resolve('buffer'),
      },
    },
  },
}

Vite项目 #

修改vite.config.js：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      buffer: 'buffer',
    },
  },
  define: {
    global: 'window',
  },
})

然后在main.js顶部添加：

import { Buffer } from 'buffer'
window.Buffer = Buffer

2. 确保路由切换时MQTT客户端持续运行 #

你的当前代码已经通过导出单例client实现了基础的持久化连接，只需补充以下细节：

• 所有组件复用my_mqtt.js导出的client实例，不要在组件内重新创建客户端
• 在根组件App.vue中维护连接状态，避免路由切换时意外断开：

<script>
import { client } from './my_mqtt';

export default {
  name: 'App',
  data() {
    return {
      mqttClient: client
    }
  },
  mounted() {
    // 若连接断开，自动尝试重连
    if (!this.mqttClient.connected) {
      this.mqttClient.reconnect()
    }
  }
}
</script>

3. 额外检查项 #

• 确认MQTT broker配置：前端使用mqtts协议时，broker需支持WebSocket over TLS（浏览器环境下mqtt.js会自动转为wss协议）
• 排查跨域问题：若浏览器控制台出现跨域错误，需在MQTT broker端配置允许当前项目域名的跨域请求

内容的提问来源于stack exchange，提问作者Cooder