1、安装mqtt模块 

npm i mqtt

2、在文件夹 src > utils 下创建新的文件夹 mqtt  再到mqtt文件夹下创建usemqtt.ts 

3、usemqtt.ts文件代码

import * as mqtt from "mqtt/dist/mqtt.min";
import { reactive, ref, onMounted, onUnmounted, nextTick } from "vue";
function useMqtt(options: any) {
  const data = ref();
  const connection = reactive({
    // ws or wss
    protocol: options.protocol,
    host: options.host,
    // ws -> 8083; wss -> 8084
    port: options.port,
    clientId: options.clientId,
    username: options.username,
    password: options.password,
    clean: options.clean,
    connectTimeout: options.connectTimeout, // ms
    reconnectPeriod: options.reconnectPeriod // ms
  });
  // //订阅信息设置
  const subscription = ref({
    topic: options.subscription.topic, //需要动态配置
    qos: options.subscription.qos as mqtt.QoS
  });
  let client = ref({
    connected: false
  } as mqtt.MqttClient);
  const receivedMessages = ref("");
  const subscribedSuccess = ref(false);
  const btnLoadingType = ref("");
  const retryTimes = ref(0);
  // const data = ref(); //接收的数据值
  // //初始化
  const initData = () => {
    client.value = {
      connected: false
    } as mqtt.MqttClient;
    retryTimes.value = 0;
    btnLoadingType.value = "";
    subscribedSuccess.value = false;
  };
  const handleOnReConnect = () => {
    retryTimes.value += 1;
    if (retryTimes.value > 5) {
      try {
        client.value.end();
        initData();
        console.log("connection maxReconnectTimes limit, stop retry");
      } catch (error) {
        console.log("handleOnReConnect catch error:", error);
      }
    }
  };
  // // 创建连接
  const createConnection = () => {
    try {
      btnLoadingType.value = "connect";
      const { protocol, host, port, ...options } = connection;
      const connectUrl = `${protocol}://${host}:${port}/mqtt`;
      client.value = mqtt.connect(connectUrl, options);

      if (client.value.on) {
        client.value.on("connect", () => {
          btnLoadingType.value = "";
          console.log("connection successful");
        });
        client.value.on("reconnect", handleOnReConnect);
        client.value.on("error", (error: any) => {
          console.log("connection error:", error);
        });
        client.value.on("message", (topic: string, message: any) => {
          receivedMessages.value = receivedMessages.value.concat(message.toString());
          data.value = JSON.parse(message); //将接收的message JSON对象转成js对象
          console.log("收到的数据--------------", data.value);
        });
      }
    } catch (error) {
      btnLoadingType.value = "";
      console.log("mqtt.connect error:", error);
    }
  };
  //订阅消息
  const doSubscribe = () => {
    btnLoadingType.value = "subscribe";
    const { topic, qos } = subscription.value;
    client.value.subscribe(topic, { qos }, (error: Error, granted: mqtt.ISubscriptionGrant[]) => {
      btnLoadingType.value = "";
      if (error) {
        console.log("subscribe error:", error);
        return;
      }
      subscribedSuccess.value = true;
      console.log("subscribe successfully:", granted);
    });
  };
  //关闭连接
  const destroyConnection = () => {
    if (client.value.connected) {
      btnLoadingType.value = "disconnect";
      try {
        client.value.end(false, () => {
          initData();
          console.log("disconnected successfully");
        });
      } catch (error) {
        btnLoadingType.value = "";
        console.log("disconnect error:", error);
      }
    }
  };
  onMounted(() => {
    nextTick(() => {
      createConnection();
      doSubscribe();
    });
  });
  // //组件销毁前断开连接
  onUnmounted(() => {
    console.log("页面销毁前断开连接------");
    destroyConnection();
  });
  return { data, connection, subscription };
}

export default useMqtt;

 4、页面调用代码块（可在options中配置mqtt所需要的参数 如：账号、密码）

<template>
  <div>
    <div>接收的数据对象-----{{ data }}</div>
  </div>
</template>
<script setup lang="ts">
import useMqtt from "@/utils/mqtt/usemqtt";
//mqtt 参数配置
const options = {
  clean: true,
  clientId: "emqx_vue3_" + Math.random().toString(16).substring(2, 8),
  connectTimeout: 30 * 1000, // ms,
  host: "192.168.221.62",
  password: "admin111",
  port: 8083,
  protocol: "ws",
  reconnectPeriod: 4000, // ms
  username: "admin",
  subscription: { topic: "topic/mqttx", qos: 0 } //需要动态配置
};
// 使用hoosk函数导出的值
const { data, connection, subscription } = useMqtt(options);
console.log("connection------", connection);
console.log("subscription----------", subscription);
</script>

<style scoped lang="scss"></style>

5、调试程序

调试地址：http://www.emqx.io/online-mqtt-client#/recent_connections/4a4f3083-557c-486c-8024-2447a7063a1f

图一为后端发送的消息值

图二为项目中接收到的值

 另外注意，本项目只有创建链接、订阅消息、接收数据 如需要发送消息可去如下地址

https://github.com/emqx/MQTT-Client-Examples/tree/master/mqtt-client-Vue3.js

（注：本人就是根据如上地址项目做了一些删减和封装，上地址包含了vue2 vue3使用mqtt通信的项目代码）

都看到这了，点个赞走呗！