用Vue3与Web Serial API构建轻量级硬件交互Web应用
想象一下，你正在开发一个需要与Arduino或传感器通信的项目。传统方案可能让你立即想到Electron——那个能让你用Web技术构建跨平台桌面应用的工具。但Electron带来的内存占用和分发复杂性是否让你犹豫？现在，现代浏览器提供的Web Serial API配合Vue3，可以让你用纯Web技术实现硬件交互，用户只需打开一个网页就能操控设备。
1. 为什么选择Web Serial API而非Electron？
在深入代码之前，让我们先理清技术选型的考量。Electron确实强大，但它的缺点也很明显：
- 资源占用高：一个简单的Electron应用可能占用数百MB内存
- 分发复杂：需要为不同平台打包，用户必须下载安装
- 更新繁琐：每次更新都需要用户重新下载安装包
相比之下，Web Serial API方案的优势在于：
| 特性 | Web Serial API | Electron |
|---|---|---|
| 部署方式 | 直接通过URL访问 | 需要安装 |
| 内存占用 | 仅浏览器标签页开销 | 整个Chromium+Node运行时 |
| 更新机制 | 服务端即时更新 | 需用户手动更新 |
| 跨平台 | 所有支持该API的浏览器 | 需为不同平台打包 |
| 开发体验 | 纯前端技术栈 | 需了解Node集成 |
关键点：Web Serial API自Chrome 89开始稳定支持，Edge、Opera等基于Chromium的浏览器也已实现。虽然Safari和Firefox尚未原生支持，但可以通过polyfill或扩展实现兼容。
2. 环境准备与兼容性处理
2.1 浏览器支持检测
在开始编码前，首先要确保用户的浏览器环境支持所需功能：
// 在Vue3的setup函数中检查API支持 onMounted(() => { if (!('serial' in navigator)) { ElMessage.error('当前浏览器不支持Web Serial API，请使用Chrome 89+或Edge 89+') console.warn('Web Serial API not supported') } })提示：对于生产环境，建议提供友好的降级方案，比如引导用户下载兼容浏览器或使用备用交互方式。
2.2 项目初始化
使用Vite创建Vue3项目是当前最高效的方式：
npm create vite@latest serial-port-app --template vue-ts cd serial-port-app npm install element-plus @element-plus/icons-vue在main.ts中配置Element Plus：
import { createApp } from 'vue' import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' import App from './App.vue' const app = createApp(App) app.use(ElementPlus) app.mount('#app')3. 核心功能实现
3.1 串口连接管理
创建一个useSerial.js组合式函数来封装串口逻辑：
import { ref } from 'vue' import { ElMessage } from 'element-plus' export default function useSerial() { const port = ref(null) const isConnected = ref(false) const receivedData = ref('') const connect = async () => { try { port.value = await navigator.serial.requestPort() await port.value.open({ baudRate: 9600 }) isConnected.value = true ElMessage.success('串口连接成功') startReading() } catch (err) { console.error('连接失败:', err) ElMessage.error(`连接失败: ${err.message}`) } } const disconnect = async () => { if (port.value) { try { await port.value.close() isConnected.value = false ElMessage.success('已断开串口连接') } catch (err) { console.error('断开连接失败:', err) } } } return { port, isConnected, receivedData, connect, disconnect } }3.2 数据读写实现
在同一个组合式函数中继续添加数据读写方法：
const startReading = async () => { const reader = port.value.readable.getReader() const decoder = new TextDecoder() try { while (true) { const { value, done } = await reader.read() if (done) { reader.releaseLock() break } receivedData.value += decoder.decode(value) console.log('收到数据:', receivedData.value) } } catch (err) { console.error('读取数据出错:', err) } } const sendData = async (data) => { if (!port.value || !isConnected.value) { ElMessage.warning('请先连接串口') return } try { const writer = port.value.writable.getWriter() const encoder = new TextEncoder() await writer.write(encoder.encode(data)) await writer.close() ElMessage.success('数据发送成功') } catch (err) { console.error('发送数据失败:', err) ElMessage.error('发送数据失败') } }4. 实战技巧与常见问题解决
4.1 处理连接稳定性问题
Web Serial API在实际使用中可能会遇到连接不稳定的情况。以下是几个实用技巧：
心跳检测机制：
setInterval(async () => { if (isConnected.value) { try { await sendData('PING') } catch (err) { isConnected.value = false ElMessage.error('连接已断开，尝试重新连接...') } } }, 5000)错误恢复策略：
- 实现自动重连逻辑
- 缓存未发送成功的数据
- 提供手动重连按钮
权限持久化：
// 获取之前已授权的端口列表 const ports = await navigator.serial.getPorts() if (ports.length > 0) { port.value = ports[0] await connect() }
4.2 性能优化建议
当处理高频数据时，需要考虑性能优化：
- 使用二进制数据：对于大量数据传输，使用
Uint8Array而非字符串 - 节流处理：对接收到的数据进行批处理，避免频繁更新UI
- Web Worker：将数据处理移入Worker线程，保持UI响应
// 二进制数据处理示例 const processBinaryData = (data) => { const view = new DataView(data.buffer) const temperature = view.getInt16(0, true) / 100 const humidity = view.getUint8(2) return { temperature, humidity } }5. 构建与部署注意事项
5.1 HTTPS要求
Web Serial API只能在安全上下文（HTTPS或localhost）中使用。部署时需注意：
- 生产环境必须使用HTTPS
- 开发时可用
localhost或127.0.0.1 - 测试时可使用ngrok等工具创建HTTPS隧道
5.2 渐进式增强策略
对于不支持的浏览器，可以提供备用方案：
- 检测API支持情况并显示提示
- 提供串口助手下载链接
- 实现基于WebSocket的代理方案
<template> <div v-if="!isSupported" class="browser-warning"> <el-alert type="error" show-icon> 您的浏览器不支持Web Serial API，请使用最新版Chrome或Edge </el-alert> <el-button type="primary" @click="downloadChrome"> 下载Chrome浏览器 </el-button> </div> </template>在实际项目中，我发现这种纯Web方案特别适合需要快速迭代的原型开发，以及那些希望用户能够即开即用的场景。相比传统桌面应用，用户不再需要担心安装和更新问题，开发者也能更专注于功能实现而非跨平台兼容性问题。
