在Vite构建的Vue项目中使用MQTT npm包的配置方法咨询

1. 安装MQTT包 #

首先通过包管理工具安装mqtt：

npm install mqtt
# 或使用yarn
yarn add mqtt

2. 配置Vite适配浏览器环境 #

mqtt包默认入口针对Node.js环境，浏览器端需使用它预编译的适配版本。在vite.config.js中添加以下配置，直接指向浏览器端的编译文件：

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

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      'mqtt': 'mqtt/dist/mqtt.min.js'
    }
  },
  optimizeDeps: {
    include: ['mqtt/dist/mqtt.min.js']
  }
})

3. 在Vue组件中使用MQTT #

配置完成后，即可在Vue组件中正常引入并使用mqtt，示例如下：

<script setup>
import mqtt from 'mqtt'
import { onUnmounted } from 'vue'

// 连接MQTT broker（替换为你的服务器地址，注意使用WS/WSS协议）
const client = mqtt.connect('ws://your-mqtt-server:8083/mqtt')

client.on('connect', () => {
  console.log('MQTT连接成功')
  // 订阅主题
  client.subscribe('demo/topic', (err) => {
    if (!err) {
      // 发布消息
      client.publish('demo/topic', 'Hello from Vue + Vite!')
    }
  })
})

// 监听消息
client.on('message', (topic, message) => {
  console.log(`收到主题 [${topic}] 的消息：${message.toString()}`)
})

// 组件卸载时断开连接
onUnmounted(() => {
  client.end()
})
</script>

关键说明 #

通过resolve.alias将mqtt指向预编译的浏览器端文件，绕开Vite对Node.js专属模块的解析，避免出现net、tls等模块找不到的编译错误。同时optimizeDeps.include确保Vite在预构建阶段处理该文件，提升运行效率。

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