准备工作

1. 首先要安装配置好node以及npm，大家可以自行百度,，我的node版本是12.15.0（当你一直搞不定的时候不妨切换成跟我一样的版本再试试）
   如果不想使用淘宝的镜像，可以用华为的（淘宝的镜像中似乎没找到electron 7.1.9）

    npm config set registry https://repo.huaweicloud.com/repository/npm/
    npm config set disturl https://repo.huaweicloud.com/nodejs
    npm config set electron_mirror https://repo.huaweicloud.com/electron/
    npm config set python_mirror https://repo.huaweicloud.com/python
   

2. 因为我们是以electron-vue为基础，所以大家可以去electron-vue官网按照教程去建立项目。打包方式我选择的是electron-builder
3. 在package.json中更改electron的版本为7.1.9（其他的版本打包可能会有问题，只是可能）,在dependencies中添加依赖serialport，我选择的版本是9.0.4
4. 执行npm install等待下载依赖包

重点步骤

windows-build-tools

由于需要用到python和vc，所以使用该工具来简化操作，他会帮助我们安装

1. python 2.7（说是不支持3.x，但是我用的3.x也没什么问题，大家还是最好用2.7）
2. visual C++ Build Tools（vs2015及以上)
3. .net framework 4.5.1

npm install -g windows-build-tools

如果一直卡住不动可以试试

npm install -g windows-build-tools@4.0.0

或者

npm install -g windows-build-tools --vs2015

node-gyp

用于调用其他语言编写的程序

npm install -g node-gyp

electron-rebuild

编译原生Node.js模块，需要使用electron-rebuild

npm install electron-rebuild -D

安装完成后在cmd或PowerShell打开当前文件路径，执行以下命令

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

serialport

如果以上步骤都没有问题（99.99%会有问题，天选之子除外），那就可以愉快的编码了

const SerialPort = require('serialport')
// 数据分隔
const Delimiter = require('@serialport/parser-delimiter')
const serial = new SerialPort('COM1', {
      // 波特率
      baudRate: 9600,
      // 数据位
      dataBits: 8,
      // 奇偶校验
      parity: 'none',
      // 停止位
      stopBit: 1,
      flowControl: false,
      // 不自动打开
      autoOpen: false
    })
// 可以使用字符串 delimiter: '\n'
const parser = serial.pipe(new Delimiter({delimiter: Buffer.from([0x03, 0x02])}))
serial.on('error', error => console.log('串口错误: ' + error.message))
serial.open(error => {
     if (error) { console.log('打开串口失败, ' + error) } 
     else {
       console.log('打开串口成功')
       parser.on('data', data => {console.log('收到串口数据：' + data)})
     }
})

问题

Could not find Python

查看python是否成功安装，是否配置到环境变量PATH中
如果没有，可以自己手动去下载 python2.7安装

Could not find any Visual Studio installation to use

VS没有安装成功，自己手动安装。

下载方式一：
在node-gyp仓库，On Windows处标出了下载地址和安装方式
Install Visual C++ Build Environment: Visual Studio Build Tools (using “Visual C++ build tools” workload) or Visual Studio Community (using the “Desktop development with C++” workload)
下载Visual Studio Build Tools或者Visual Studio Community都可以

下载方式二：
在C:\Users\Administrator\.windows-build-tools（不一定是Administrator，取决于你的登录用户名）中查看是否存在vs_BuildTools.exe，这个是windows-build-tools下载的，如果没有则采用方式一下载。

下载完成后运行后该程序卡住，可能是DNS的问题。解决办法是在网络适配器中修改DNS，修改完成后再次运行该程序即可。

运行成功了则一定要勾选Visual C++ build tools 或 Desktop development with C++ 后安装（取决于你下载的是哪一种）

valid versions for msvs_version

配置的VS版本不合法，一般在下一行就打印出合法的版本号，也就是你安装的版本

// 查看npm是否配置了 msvs_version
npm config list
// 未配置可以自己配置成提示的版本号
npm config set msvs_version 2015

如果仍然出现了上述问题，可以在环境变量（一般是用户环境变量）中查找是否配置了GYP_MSVS_VERSION，如果有则改成安装的VS版本，改了环境变量之后要创建新的CMD或PowerShell窗口运行。

打包失败

打包的时候由于网络原因会有一些依赖包下载失败，错误信息中一般会出现下载地址和文件名称，这时候可以自行手动下载后保存到对应的位置。我在打包的时候这些文件都是我手动下载的：

electron-v7.1.9-win32-x64.zip(C:\Users\Administrator\AppData\Local\electron\Cache)
winCodeSign-2.4.0.7z(C:\Users\Administrator\AppData\Local\electron-builder\cache\winCodeSign)
nsis-3.0.3.2.7z(C:\Users\Administrator\AppData\Local\electron-builder\cache\nsis)
nsis-resources-3.3.0(C:\Users\Administrator\AppData\Local\electron-builder\cache\nsis)

括号后面是路径，一般都是在APPDATA文件夹下（不知道在哪可以在CMD中输入start %APPDATA%找到APPDATA），将下载好的文件解压到指定的文件夹中即可。

不知道怎么操作的可以参考这篇文章
实施过程中遇到其他问题可以参考这篇文章