vue实现串口通信
使用 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 调用
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 方案适合桌面端，后端中转适合受限环境。
