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

电脑本地环境准备

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

node版本：12.16.1
npm版本：6.13.4
全局安装 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

安装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，第一种方式

进入目录：cd ./node_modules/@serialport/bindings
编译：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位

编译成功

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

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

vue调用android串口通信,vue-cli3+electron+serialport实现串口通信，收银系统对接电子秤...
项目创建参考:https://zhuanlan.zhihu.com/p/75764907 电脑本地环境准备注意版本号,electron和node建议使用跟我一样的版本 node版本:12.16.1 ...
实现断网收银_超市收银系统排名前五
相信很多没有配备收银系统的老板们都想知道,市面上的收银系统这么多,总得有个排名什么的吧?为了满足各位老板们的刚性需求,这里粗略地为大家进行一个简单的排名,仅供参考,希望各位老板看的满意. 1.中仑收银 ...
实现断网收银_2019连锁超市收银系统前5名
连锁超市.连锁便利店已经是零售便利商超发展的必然趋势.不可阻挡,而随着店面的扩大,店铺的经营范围.影响力都在扩大,包括员工自身的口碑营销,都在对门店进行营销和推广.而随着连锁便利商超的繁荣发展,越来越 ...
实现断网收银_2019超市连锁店收银系统前5名
由于连锁超市.连锁便利店的激烈竞争,带动了连锁收银系统的广泛需求,而随着连锁商户对收银系统提出给更高的要求,收银系统之间的竞争也越来越激烈,不管是从价格方面还是软件各项功能方面,都在朝着低价高品质的方 ...
初级项目vue实战项目收银系统
Vue实战视频-快餐店收银系统 (共11集) 2017-05-22 分类:Vue.js视频教程 / 视频教程阅读(126832) 评论(136) 课程前言这是我网站恢复后写的第一篇文章,在关站这 ...
vue springboot 会员收银系统 (1)
会员系统预览 http://120.26.95.195/ admin 111111 前言之前发布的会员系统有很多小伙伴留言开源 vue springboot 会员收银系统但是由于工作原因不方便 ...
vue springboot 会员收银系统
预览地址 http://120.26.95.195/ demo demo123 收银系统多门店管理会员管理系统门店营销系统 .支持单门店和多门店. 主要功能有 1会员管理2 商品管理 3 ...
基于51单片机的双机串口通信排队叫号系统（LCD显示）设计
基于51单片机的双机串口通信排队叫号系统(LCD显示)设计 1 开发环境视频讲解 2 功能说明介绍 3 仿真图 4 程序 5 原理图 6 视频讲解 7 设计报告 7.1 设计目的 7.2 设计要求及 ...
Vue-快餐店收银系统-leftNav.vuePos.vue
一好友推荐学习vue的一个博客网址共享:http://jspang.com/ 这是比较基础的课程技术胖用的是live-server来搭建服务器环境的,推荐以下链接:https://www.cnbl ...
收银系统服务器数据库,收银系统服务器数据库
收银系统服务器数据库内容精选换一换计费项包括存储费和流量费,存储费根据存储库的不同进行收取.详细的计费项目如下所示:存储费:云硬盘备份存储库:备份云硬盘时购买.云服务器备份存储库:备份普通云服务 ...

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