当前位置：首页 > VUE

vue实现串口通信

2026-03-08 05:54:06VUE

使用 Vue 实现串口通信的方法

Vue 本身是一个前端框架，无法直接操作串口（Serial Port）。需要通过浏览器 API 或第三方库与串口设备交互。以下是几种常见实现方式：

通过 Web Serial API 实现

现代浏览器支持 Web Serial API，允许网页与串口设备通信。需确保浏览器兼容性（Chrome/Edge 89+、Opera 76+）。

安装依赖 无需额外安装，直接调用浏览器 API。

示例代码

// 在 Vue 组件中
methods: {
  async requestSerialPort() {
    try {
      const port = await navigator.serial.requestPort();
      await port.open({ baudRate: 9600 });
      const reader = port.readable.getReader();

      while (true) {
        const { value, done } = await reader.read();
        if (done) break;
        console.log('Received:', new TextDecoder().decode(value));
      }
    } catch (error) {
      console.error('Serial error:', error);
    }
  },

  async sendData(port, data) {
    const writer = port.writable.getWriter();
    await writer.write(new TextEncoder().encode(data));
    writer.releaseLock();
  }
}

注意事项

需通过用户手势（如按钮点击）触发 requestPort()。
部分浏览器需启用实验性功能标志。

通过 Electron 集成 Node.js 串口库

若项目基于 Electron，可通过 Node.js 的 serialport 库实现更底层的串口控制。

安装依赖

npm install serialport

示例代码

// 在 Electron 主进程或预加载脚本中
const { SerialPort } = require('serialport');

// 列出可用串口
SerialPort.list().then(ports => {
  ports.forEach(port => console.log(port.path));
});

// 打开串口
const port = new SerialPort({ path: 'COM3', baudRate: 9600 });

// 接收数据
port.on('data', (data) => {
  console.log('Data:', data.toString());
});

// 发送数据
port.write('Hello from Vue-Electron', (err) => {
  if (err) console.error('Write error:', err);
});

Vue 通信 通过 Electron 的 ipcRenderer 与主进程交互：

// Vue 组件中
const { ipcRenderer } = window.require('electron');

methods: {
  sendToSerial(data) {
    ipcRenderer.send('serial-write', data);
  }
}

通过后端服务中转

若无法直接访问串口，可通过后端服务（如 Node.js、Python）中转数据，Vue 使用 WebSocket 或 HTTP 与后端通信。

后端示例（Node.js + Express）

const express = require('express');
const SerialPort = require('serialport');
const app = express();

const port = new SerialPort({ path: 'COM3', baudRate: 9600 });
app.use(express.json());

app.post('/send', (req, res) => {
  port.write(req.body.data, (err) => {
    if (err) return res.status(500).send(err);
    res.send('Data sent');
  });
});

app.listen(3000);

Vue 调用

vue实现串口通信

methods: {
  async sendData(data) {
    await axios.post('http://localhost:3000/send', { data });
  }
}

注意事项

权限问题：浏览器环境下需用户授权，Electron 需配置 nodeIntegration。
跨平台兼容性：串口路径在 Windows 为 COMx，Linux/macOS 为 /dev/ttyxxx。
错误处理：添加超时、断开重连等逻辑增强鲁棒性。
数据格式：根据设备协议处理二进制或文本数据，注意编码（如 UTF-8、ASCII）。

以上方法可根据实际场景选择，Web Serial API 适合纯前端应用，Electron 方案适合桌面端，后端中转适合受限环境。

标签: 串口通信

分享给朋友：