一、下载npm install serialport

二、在vue页面中引入使用

const { SerialPort } = require('serialport');

这是serialport官方文档写的很完整，有什么问题可以看文档。

三、初始化SerialPort

在mounted或者onLoad中初始化，默认创建的SerialPort对象就会打开端口。path串口名称，baudRate波特率

        // 初始化串口initSerialPort(value = 'COM20') {// 关闭已打开的串口this.closeSerialPort();// 创建新的 SerialPort 实例this.port = new SerialPort({ path: value, baudRate: 115200 }, (err) => {if (err) {console.error('Error opening serial port:', err);this.SerialLink = `${this.$t('Connected', this.language)}，${err}`;if (err == 'Error: Opening COM20: File not found') {this.initSerialPort('COM9');}// 可以在这里添加错误处理逻辑} else {console.log('Serial port opened successfully.');this.SerialLink = this.$t('connected', this.language);this.onData();}});// 监听串口错误this.port.on('error', (err) => {console.error('Serial port error:', err);});},

添加autoOpen为false改为关闭，手动打开open方法

this.port = new SerialPort({ path: value, baudRate: 115200 }, { autoOpen: false })
this.port.open()

三、on方法监听串口传输的信息

this.port.on('data', (data) => {console.log(data)
})

四、write方法向串口发送信息

this.port.write(Buffer.from('reset
'));

五、close方法关闭串口连接

        closeSerialPort() {if (this.port && this.port.isOpen) {this.port.close(() => {console.log('Serial port closed.关闭串口');});}},

六、还有一些官方自带的解析器（对我来说没啥用）

自行查看官方文档https://serialport.io/docs/api-parsers-overview

在接受指定的字节数后返回
const { ByteLengthParser } = require('@serialport/parser-byte-length');
const parser = this.port.pipe(new ByteLengthParser({ length: 8 }))

注意当前端处理高频数据流时会丢失数据100/s的数据（电脑性能越低越明显）

七、串口数据解析

1.二进制数据转十六进制的字符串

parseData(arrBytes) {var str = '';for (var i = 0; i < arrBytes.length; i++) {var tmp;var num = arrBytes[i];if (num < 0) {//此处填坑，当byte因为符合位导致数值为负时候，需要对数据进行处理tmp = (255 + num + 1).toString(16);} else {tmp = num.toString(16);}if (tmp.length == 1) {tmp = '0' + tmp;}str += tmp;}return str;
}

2.二进制数据，解码成一个文本字符串

parseUint8Array(data) {const decoder = new TextDecoder('utf-8');const text = decoder.decode(data);return text
}