Vue2 + Electron实战：从零构建串口调试桌面应用并打包分发

1. 环境准备与项目初始化搞过硬件开发的朋友都知道串口调试是个高频需求。以前我总用各种现成的串口助手工具直到有次项目需要定制化功能才决定自己动手撸一个。用Vue2Electron组合真是选对了既能享受前端开发的便捷又能打包成桌面应用。下面就把我踩坑总结的经验完整分享给大家。先说说我的开发环境配置Node.js v14.17.0建议用LTS版本npm 6.14.13Windows 10系统Mac/Linux操作略有不同VS Code编辑器创建项目骨架特别简单# 初始化Vue2项目 vue create vue-electron-serial cd vue-electron-serial vue add electron-builder安装核心依赖时要注意版本兼容性npm install serialport9 -S npm install serialport/parser-readline -S这里有个坑我踩过三次serialport在Electron中必须用rebuild。执行以下命令解决npm install --save-dev electron-rebuild ./node_modules/.bin/electron-rebuild2. 虚拟串口环境搭建没硬件设备也能开发虚拟串口工具真是救命稻草。我对比过五六款工具最终锁定Virtual Serial Port Driver简称VSPD。安装后创建端口对如COM3-COM4数据就能在两个端口间互传。配置时注意以管理员身份运行软件端口号建议选COM3以上COM1/2可能被系统占用创建成功后可以在设备管理器查看测试环节推荐用Serial Port Utility连接COM3发送Hello Vue我们的应用连接COM4看到数据回显就说明通道通了3. 串口通信核心实现3.1 前端界面搭建用Vue2写界面就是舒服20分钟搞定功能布局template div classserial-container el-select v-modelselectedPort placeholder选择串口 el-option v-forport in portList :keyport :valueport/ /el-select el-button clickhandleOpen打开串口/el-button el-input v-modelsendData placeholder输入发送内容/ el-button clickhandleSend发送数据/el-button div classreceive-box{{ receivedData }}/div /div /template3.2 串口操作封装关键代码都在这个serial.js里const SerialPort require(serialport) const Readline require(serialport/parser-readline) export default { data() { return { portInstance: null, parser: null } }, methods: { async listPorts() { return await SerialPort.list() }, openPort(path, baudRate 9600) { this.portInstance new SerialPort(path, { baudRate }) this.parser this.portInstance.pipe(new Readline()) this.parser.on(data, data { this.$emit(data-received, data) }) }, sendData(data) { this.portInstance.write(data \n) } } }3.3 双向通信测试实测时发现三个常见问题乱码问题检查波特率是否一致9600/115200等数据截断发送时加上换行符\n端口占用关闭其他串口调试工具4. Electron集成技巧4.1 主进程配置background.js里要特别注意这几处function createWindow() { mainWindow new BrowserWindow({ webPreferences: { nodeIntegration: true, contextIsolation: false // 允许渲染进程访问Node API } }) }4.2 安全策略调整最近Electron版本升级后默认安全策略更严格了。需要在vue.config.js添加module.exports { pluginOptions: { electronBuilder: { nodeIntegration: true, externals: [serialport] } } }5. 打包与分发实战5.1 打包配置优化修改package.json的build配置build: { appId: com.example.serialtool, win: { target: nsis, icon: build/icon.ico }, nsis: { oneClick: false, allowToChangeInstallationDirectory: true } }5.2 安装包定制技巧想让安装包更专业三个关键点准备256x256的ico图标添加license.txt到build文件夹在nsis配置中添加开始菜单项打包命令很简单npm run electron:build生成的安装包在dist_electron目录下我测试过在Win7/Win10都能完美运行。6. 项目优化建议错误处理增加串口断开重连机制日志系统用electron-log记录运行日志自动更新集成electron-updater多平台适配处理Mac/Linux的串口路径差异/dev/tty.*源码已整理好放在Gitee包含完整的分支记录master分支基础功能实现dev分支正在开发的增强功能release分支稳定发布版本遇到问题可以直接提issue看到都会回复。这个项目我会长期维护接下来计划加入Modbus协议解析功能有兴趣的朋友可以一起参与开发。