Web端连接称重机串口实时获取数据问题（无需Node Serialport库）

一、报错原因 #

你使用的serialport是Node.js后端专属的串口操作库，依赖Node.js的底层系统API实现串口通信。而纯前端Vue项目运行在浏览器环境中，没有Node.js的系统级API支持，因此引入后会触发类继承失败的TypeError。这个库仅能在Electron、Node.js服务端这类具备Node运行环境的场景使用，无法在纯前端项目中运行。

二、无第三方库的前端串口实现方案（Web Serial API） #

浏览器原生提供的Web Serial API可以直接在前端实现串口连接与数据读取，完全满足你“客户端连接称重机串口、点击按钮获取单行数据”的需求，且无需依赖任何第三方库。

实现代码（Vue 3） #

<template>
  <div>
    <button @click="connectSerial">连接称重机串口</button>
    <button @click="readSingleData">读取单行数据</button>
    <p>读取结果：{{ receivedData }}</p>
  </div>
</template>

<script setup>
import { ref, onUnmounted } from 'vue'

const receivedData = ref('')
let serialPort = null
let dataReader = null

// 连接串口（必须由用户交互触发）
async function connectSerial() {
  try {
    // 请求用户选择串口，可通过USB VID/PID过滤指定设备
    serialPort = await navigator.serial.requestPort({
      filters: [
        // 示例：过滤特定厂商/产品ID的设备，需替换为称重机实际参数
        // { usbVendorId: 0x1234, usbProductId: 0x5678 }
      ]
    })
    // 打开串口，波特率需与称重机配置一致
    await serialPort.open({ baudRate: 9600 })
    receivedData.value = '串口连接成功'
  } catch (err) {
    receivedData.value = `连接失败：${err.message}`
    console.error(err)
  }
}

// 读取单行数据
async function readSingleData() {
  if (!serialPort || !serialPort.readable) {
    receivedData.value = '请先连接串口'
    return
  }
  try {
    dataReader = serialPort.readable.getReader()
    let dataBuffer = ''
    // 循环读取直到捕获换行符（单行数据结束标记）
    while (true) {
      const { value, done } = await dataReader.read()
      if (done) break
      // 将二进制数据解码为字符串
      dataBuffer += new TextDecoder().decode(value)
      // 适配不同换行规则（多数称重机用\n或\r\n）
      const lineBreakIndex = dataBuffer.indexOf('\n')
      if (lineBreakIndex !== -1) {
        const singleLineData = dataBuffer.slice(0, lineBreakIndex).trim()
        receivedData.value = singleLineData
        // 保留缓冲区剩余数据，避免丢失后续内容
        dataBuffer = dataBuffer.slice(lineBreakIndex + 1)
        break
      }
    }
    // 释放阅读器，允许后续操作复用串口
    await dataReader.releaseLock()
  } catch (err) {
    receivedData.value = `读取失败：${err.message}`
    console.error(err)
    if (dataReader) await dataReader.releaseLock()
  }
}

// 页面卸载时自动关闭串口
onUnmounted(async () => {
  if (serialPort) {
    if (dataReader) await dataReader.releaseLock()
    await serialPort.close()
  }
})
</script>

关键注意事项 #

• Web Serial API仅支持HTTPS环境（本地开发的localhost除外）
• 仅兼容Chrome、Edge、Opera等Chromium内核浏览器，Firefox/Safari暂不支持
• 串口连接必须由用户主动操作触发（如点击按钮），浏览器禁止自动请求串口权限
• 需根据称重机实际配置调整波特率、换行符（部分设备用\r作为结束标记）

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