Electron+serialport串口通信+sqlite3集成过程

概要

提示：最近在electron项目中使用serialport+sqlite3的时候遇到的各种问题再此做个记录

准备工作

首先你要设置electron的镜像源不然你很有可能在后面的某些步骤上出错

npm config set registry https://registry.npmmirror.com
npm config set ELECTRON_MIRROR https://npmmirror.com/mirrors/electron/

然后win+R打开cmd 输入.npmrc回车

会出现一个这样的文件

在里面添加

disturl=https://registry.npmmirror.com/-/binary/node
ELECTRON_BUILDER_BINARIES_MIRROR=https://npmmirror.com/mirrors/electron-builder-binaries/
operadriver_cdnurl=https://registry.npmmirror.com/-/binary/operadriver/
phantomjs_cdnurl=https://registry.npmmirror.com/phantomjs
SASS_BINARY_SITE=https://registry.npmmirror.com/mirrors/node-sass/

这都是各种踩坑后总结出来的
PS：另外node_gyp、msvs_version、python这几项在下面会单独说。折腾我一两天

1.项目创建

网上有个比较火的脚手架electron-vue，github 上 12.2k 的 star，大家应该都听说过或者使用过，但现在我们不使用它，electron-vue是vue-cli2.0的版本，现在都已经出道 4.0 了，再者electron-vue已经很久没有更新，我们可以使用 vue 最新的脚手架加上插件vue-cli-plugin-electron-builder来搭建项目，项目结构也更加清晰明了。如果对脚手架electron-vue感兴趣可去 这里

vue create vue-electron

// 自定义创建
? Please pick a preset:
  default (babel, eslint)
❯ Manually select features
// 这里选择自定义创建，使用babel(语法编译器)、Router(路由)、CSS Pre-processors(css预处理器)、Linter / Formatter(代码风格、格式校验)：
? Please pick a preset: Manually select features
? Check the features needed for your project:
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◉ Vuex
 ◉ CSS Pre-processors
❯◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing
 
` 注意：router这里不要使用history模式，原因是electron的项目不能使用history模式 输入n，进入下一步：`
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) n

// css预处理器这里选择Sass
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
  Sass/SCSS (with dart-sass)
❯ Sass/SCSS (with node-sass)
  Less
  Stylus

// 选择ESLint代码检查工具，我这里选择的是“ESLint + Airbnb config”，强烈建议大家一定要在项目内使用ESLint，一直用一直爽，懂的自然懂……该有的规范还是要遵循的：
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
? Pick a linter / formatter config:
  ESLint with error prevention only
❯ ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier
  
// 选择什么时候执行ESLint检查，我这里两个都选了，保存时检查“Lint on save”，向仓库提交代码时也检查“Lint and fix on commit”，不符合规范的代码我们不允许提交到仓库：
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
? Pick a linter / formatter config: Airbnb
? Pick additional lint features:
 ◉ Lint on save
❯◉ Lint and fix on commit

// 这里是询问 babel, postcss, eslint这些配置是单独的配置文件还是放在package.json 文件中，这里我们选择“In dedicated config files”单独放置：
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
? Pick a linter / formatter config: Airbnb
? Pick additional lint features: Lint on save, Lint and fix on commit
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files
  In package.json
// 这里是最后的操作，是否保存该配置，如果你下次需要使用相同的配置，那么可以选择 yes，我这选择 no：
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
? Pick a linter / formatter config: Airbnb
? Pick additional lint features: Lint on save, Lint and fix on commit
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N) no

执行完以上操作，剩下的我们等待项目下载依赖包，vue项目初始化就算搞定了。

cd vue-electron-notes进入项目跑一遍npm run serve，这个时候没什么问题就已经成功运行起来了！

2.在项目内集成Electron

进入我们项目的根目录，我们执行以下命令来安装插件

vue add vue-cli-plugin-electron-builder

这里选择版本^12.0.0：

✔  Successfully installed plugin: vue-cli-plugin-electron-builder

? Choose Electron Version (Use arrow keys)
  ^10.0.0
  ^11.0