惊蛰

外观

quasar项目中用js调用串口

约 943 字大约 3 分钟

2025-06-25

有一个项目中要用前端调用串口，初步搜索后我选择了 Web Serial API 和 Node SerialPort。

但是经过实际测试，Web Serial API 直接用网页调用的方式在 electron 中使用，但 electron 中没有弹窗 不行；Node SerialPort 则可以调用串口。

Web Serial API 调串口 ❌

检查浏览器是否支持 Web Serial API

原理：Web Serial API，web 端通过串口与硬件通信

浏览器打开一个新标签页，F12，控制台输入 "serial" in navigator 按回车,true 表示支持，再进行下一步。

"serial" in navigator
true

控制台输入：

const port = await navigator.serial.requestPort();

浏览器会弹窗电脑上有的串行端口：

alt text

注意

在网页中运行良好，但是项目打包成 electron 后这个弹窗出不来。

Node SerialPort 调串口 ✔

官网：Node SerialPort

Node SerialPort 使用中也有很多坑，我最后确定的配置是：quasar1+vue2 项目、serialport@10.5.0 ，其它版本都不能正常打包成 electron 并获取串口信息。

首先创建 quasar1+vue2 项目：

npm init quasar

然后选择低版本的 quasar1+vue2 ：

注意

用 quasar2+vue3 会报错 TypeError: Class extends value undefined is not a constructor or null at node_modules/@serialport/parser-byte-length/dist/index.js

alt text

剩下的按默认选择即可：

alt text

成功后在 vscode 中打开项目。

package.json

  "dependencies": {
    "@quasar/extras": "^1.0.0",
    "core-js": "^3.6.5",
    "quasar": "^1.0.0"
  },
  "devDependencies": {
    "@babel/eslint-parser": "^7.13.14",
    "eslint": "^8.10.0",
    "eslint-plugin-vue": "^9.0.0",
    "eslint-webpack-plugin": "^2.0.0",
    "eslint-config-prettier": "^8.1.0",
    "prettier": "^2.5.1",
    "@quasar/app": "^2.0.0"
  },

安装 serialport@10.5.0 :

其它版本也会报错，很多错误！

npm i serialport@10.5.0
  "dependencies": {
    "@quasar/extras": "^1.0.0",
    "core-js": "^3.6.5",
    "quasar": "^1.0.0",
    "serialport": "^10.5.0"
  },
  "devDependencies": {
    "@babel/eslint-parser": "^7.13.14",
    "@quasar/app": "^2.0.0",
    "eslint": "^8.10.0",
    "eslint-config-prettier": "^8.1.0",
    "eslint-plugin-vue": "^9.0.0",
    "eslint-webpack-plugin": "^2.0.0",
    "prettier": "^2.5.1"
  },

然后安装 electron 模式

quasar mode add electron
 "dependencies": {
    "@quasar/extras": "^1.0.0",
    "core-js": "^3.6.5",
    "quasar": "^1.0.0",
    "serialport": "^10.5.0"
  },
  "devDependencies": {
    "@babel/eslint-parser": "^7.13.14",
    "@quasar/app": "^2.0.0",
    "devtron": "^1.4.0",
    "electron": "^9.4.4",
    "electron-debug": "^3.2.0",
    "electron-devtools-installer": "^3.2.0",
    "eslint": "^8.10.0",
    "eslint-config-prettier": "^8.1.0",
    "eslint-plugin-vue": "^9.0.0",
    "eslint-webpack-plugin": "^2.0.0",
    "prettier": "^2.5.1"
  },

这个时候配置已经完成了，把 electron-serialport 中 renderer.js 里的代码拷贝粘贴到 Index.vue 中，改成对应的 vue 格式。

其它页面也可以，只是为了保证这段代码运行

<template>
  <div>
    <h4>测试串口</h4>
    <p v-for="item in myports" :key="item.path">
      {{ item }}
    </p>
  </div>
</template>

<script>
import { SerialPort } from "serialport";
export default {
  data() {
    return {
      myports: [],
    };
  },
  mounted() {
    setInterval(() => {
      this.listSerialPorts();
    }, 2000);
  },
  methods: {
    async listSerialPorts() {
      let self = this;
      await SerialPort.list().then((ports, err) => {
        if (err) {
          console.log("ERROR", err.message);
          return;
        }
        if (ports.length === 0) {
          console.log("NO PORTS");
        }
        console.log("ports", ports);
        self.myports = ports;
      });
    },
  },
};
</script>

运行项目到 electron：

quasar dev -m electron

运行结果：

alt text

常见问题

bug1：

 ERROR  Failed to compile with 12 errors                                                                                                                                                                                  16:40:54
 error  in ./node_modules/@serialport/parser-byte-length/dist/index.js

Module parse failed: Unexpected token (11:10)
File was processed with these loaders:
 * ./node_modules/@quasar/app/lib/webpack/loader.transform-quasar-imports.js
You may need an additional loader to handle the result of these loaders.
|  */
| class ByteLengthParser extends stream_1.Transform {
>     length;
|     position;
|     buffer;

 @ ./node_modules/serialport/dist/index.js 17:13-54
 @ ./node_modules/@quasar/app/lib/webpack/loader.transform-quasar-imports.js!./node_modules/babel-loader/lib??ref--2-0!./node_modules/@quasar/app/lib/webpack/loader.auto-import-client.js?kebab!./node_modules/vue-loader/lib??vue-loader-options!./src/pages/Index.vue?vue&type=script&lang=js
 @ ./src/pages/Index.vue?vue&type=script&lang=js
 @ ./src/pages/Index.vue
 @ ./src/router/routes.js
 @ ./src/router/index.js
 @ ./.quasar/app.js
 @ ./.quasar/client-entry.js
 @ multi (webpack)-dev-server/client?http://0.0.0.0:8080 (webpack)/hot/dev-server.js ./.quasar/client-entry.js

原因：serialport 版本不对，直接 npm i seralport 装的是最新版，如 package.json 中 "serialport": "^12.0.0" （2024/6/21）

解决方法：更换版本 npm i serialport@10.5.0 ， package.json 中 "serialport": "^10.5.0"

alt text

如果你的中文是乱码，说明 serialport 版本装成 10.3.0 了，换成 10.5.0 即可。

bug2：

TypeError: Class extends value undefined is not a constructor or null at node_modules/@serialport/parser-byte-length/dist/index.js

原因：用了 Quasar2+Vue3

解决办法：重建项目，选择 Quasar1+Vue2

更新：使用 quasar dev -m electron 可以正常运行，但使用 quasar build -m electron 打包后 exe 运行页面空白......

alt text

参考链接