项目创建参考: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

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

npm config set python python2.7


项目使用

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

npm install serialport@8.0.6

安装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位

  1. 编译成功

在这里插入图片描述

编译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
Logo

前往低代码交流专区

更多推荐