基于 Vue3 与 MQTT 的物联网实时监控大屏：前端可视化、Broker 桥接与后端数据流实战车间和园区里几乎都有一个共同的场景：值班室正中挂着一块大屏，上面跑着产线温度、设备电流、告警条数和当班产量。以前这块屏的解决方案很固定，要么买商业组态软件，要么让集成商连同 PLC 和工业网关一起打包交付。前者授权费按点位和画面数算，改一个仪表盘也要走商务流程；后者交付的是一套黑盒，产线一改造，供应商不动，你就只能继续付钱等他们排期。真正让人难受的往往不是"能不能画出来"，而是数据是怎么进到这块屏上的。工业现场最常见的是 Modbus RTU 走 485 总线，或者 OPC UA 走以太网。这些协议本身没问题，但它们都不是为浏览器设计的。要把一块 1080P 的屏放到值班室工控机上还算好办，如果还想让三四个拿着笔记本的班组长在车间外用手机看同一份数据，工业协议那套东西就完全派不上用场了。MQTT 是这个问题的天然答案。发布订阅模型天然适合"一份数据、多个消费者"，QoS 1 和遗嘱消息解决了弱网重连与掉线判定的最后一块拼图，Topic 树天然承载了多租户与多产品线。问题在于 MQTT 规范定义在 TCP 之上，而浏览器里的 JavaScript 只能开 WebSocket，不能开裸 TCP。这中间少了一桥，很多方案就卡在这里：要么让所有浏览器都装客户端软件绕开问题，要么架一台消息服务器做协议转换。前者违背了大屏就是要随时能打开的初衷，后者如果只是简单地做一次转发，那转出来的数据又缺了鉴权、缺了聚合、缺了落库。本文的做法是把这层桥放在自己控制的云服务器上，而且不把它当成一个纯转发器：Mosquitto 负责协议与连接管理，Node.js 聚合层负责订阅、归一化、鉴权、广播与批量落库，Vue 3 前端