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