当前位置：首页 > VUE

vue实现串口通信

2026-01-08 15:55:29VUE

Vue 实现串口通信的方法

在 Vue 项目中实现串口通信，通常需要借助浏览器提供的 Web Serial API 或第三方库。以下是几种常见的实现方式：

使用 Web Serial API

Web Serial API 是现代浏览器提供的一种原生 API，允许网页与串口设备通信。需注意浏览器兼容性（Chrome、Edge 等支持）。

// 在 Vue 组件中
async function 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 port error:', error);
  }
}

使用第三方库 serialport

对于 Node.js 环境（如 Electron 应用），可以使用 serialport 库：

// 安装依赖
npm install serialport

// 在 Vue 组件中
import { SerialPort } from 'serialport';

const port = new SerialPort({ path: 'COM3', baudRate: 9600 });
port.on('data', (data) => {
  console.log('Received:', data.toString());
});

通过 Electron 实现

在 Electron 应用中，可以结合 Node.js 的 serialport 库：

vue实现串口通信

// 主进程代码
const { app, BrowserWindow } = require('electron');
const { SerialPort } = require('serialport');

let mainWindow;

app.whenReady().then(() => {
  mainWindow = new BrowserWindow({ /* 配置 */ });

  const port = new SerialPort({ path: 'COM3', baudRate: 9600 });
  port.on('data', (data) => {
    mainWindow.webContents.send('serial-data', data.toString());
  });
});

// 渲染进程（Vue 组件）
window.ipcRenderer.on('serial-data', (event, data) => {
  console.log('Received:', data);
});