vue-cli3+electron+serialport实现串口通信，收银系统对接电子秤

项目创建参考：https://zhuanlan.zhihu.com/p/75764907

---

电脑本地环境准备

注意版本号，electron和node建议使用跟我一样的版本

1. node版本：12.16.1
2. npm版本：6.13.4
3. 全局安装 npm install -g node-gyp，这是用来编译serialport的，因为npm下载serialport是源代码，源代码是C语言，需要将C语言翻译

4. 安装visual studio 2017，翻译C语言需要C环境，附上下载地址Visual Studio 2017 Community ，安装VS的时候选项如下，要勾选使用c++桌面开发

安装完成之后在cmd黑框执行一下命令

npm config set msvs_version 2017

6. 安装python2.7，注意必须是2.7，附上python下载地址-Python2.7x，安装后执行cmd黑框执行

npm config set python python2.7

---

项目使用

安装serialport，注意版本号否则编译时会出现错误

npm install [email protected]

安装electron-rebuild

npm install --save-dev electron-rebuild

编译serialport，第一种方式

1. 进入目录：cd ./node_modules/@serialport/bindings
2. 编译：node-gyp rebuild --target=6.0.10 --arch=x64 --dist-url=https://npm.taobao.org/mirrors/atom-shell

–target：electron的版本号
–arch=x64，64位；–arch=ia32，32位

3. 编译成功

编译serialport，第二种方式

项目根目录直接输入命令

.\node_modules\.bin\electron-rebuild.cmd

---

编译的时候会出现很多坑

electron版本会对应一个NODE_MODULE_VERSION值，node版本也会对应一个NODE_MODULE_VERSION值，它们必须相等否则编译会报错。

在node官网的历史版本查看NODE_MODULE_VERSION值，地址node官网。

---

页面使用serialport

页面引入注意一定要使用window.require，不能直接使用require

电脑可以下载一个【虚拟串口工具】，用于测试

const serialport = window.require(‘serialport’)

//点击事件
dayin(){
  serialport.list().then(
    ports => {
      //ports 串口
      console.log(ports)
    }
  )
},

---

electron-build打包无法将serialport打包到依赖

vue.config.js配置文件，asar：false。

asar打包，如果为true会将依赖就加密成.asar文件，导致serialport串口通信C环境无法被打包，而无法使用

module.exports = {
  pluginOptions: {
    electronBuilder: {
      builderOptions: {
        "appId": "com.example.app",
        "productName":"收银系统name",//项目名，也是生成的安装文件名，即aDemo.exe
        "copyright":"Copyright © 2020",//版权信息
        "directories":{
          "output":"./dist"//输出文件路径
        },
        "asar": false, // asar打包，如果为true会将依赖就加密成.asar文件，导致serialport串口通信C环境无法被打包，而无法使用
        "win":{//win相关配置
          "icon":"./src/assets/favicon.ico",//图标，当前图标在根目录下，注意这里有两个坑
          "target": [
            {
              "target": "nsis",//利用nsis制作安装程序
              "arch": [
                "x64"//64位
//                "ia32"//32位
              ]
            }
          ]
        },
        "nsis": {
          "oneClick": false, // 是否一键安装
          "allowElevation": true, // 允许请求提升。 如果为false，则用户必须使用提升的权限重新启动安装程序。
          "allowToChangeInstallationDirectory": true, // 允许修改安装目录
          "installerIcon": "./src/assets/favicon.ico",// 安装图标
          "uninstallerIcon": "./src/assets/favicon.ico",//卸载图标
          "installerHeaderIcon": "./src/assets/favicon.ico", // 安装时头部图标
          "createDesktopShortcut": true, // 创建桌面图标
          "createStartMenuShortcut": false,// 创建开始菜单图标
          "shortcutName": "收银系统", // 图标名称
        },
      },
      externals: ['serialport']
    }
  },
  css: {
    loaderOptions: {
      sass: {
        data: `
          @import "@/assets/scss/main.scss";
        `
      }
    }
  },
}

---

serialport的具体使用再去查资料吧，可以结合官网学习https://serialport.io/docs/api-bindings