Electron-vue之serialport使用以及打包问题记录

electron

本质上，electron 就是一个带了 Chrome 浏览器的壳子。它结合了Chromium、Node.js和用于调用操作系统本地功能的APIs（如打开文件窗口、通知、图标等）

electron-vue

electron-vue 是一个结合 vue-cli 与 electron 的项目，主要避免了使用 vue 手动建立起 electron 应用程序。

vue init simulatedgreg/electron-vue my-project

就可以拥有一个 vue-loader 的 webpack、electron-packager 或是 electron-builder，以及一些最常用的插件，如vue-router、vuex 等等的脚手架

electron-vue使用serialport进行串口通讯

• 配置环境：
  安装 npm install --global --production windows-build-tools，需要使用管理员身份打开vscode；
  安装serialport需要python、c++环境，如果电脑上已经有python环境，建议卸载，不支持3以上的python版本，最好是2.7.X；这条命令会帮助我们安装好需要的环境；
• 安装：上一步成功配置好环境之后，安装serialport就不会有问题了，按需安装即可

npm install
npm install --save-dev serialport
npm install --save-dev electron-rebuild

• 引入使用

import serialport from 'serialport'
serialport.list().then(
　　ports => {
　　　　//ports 串口
　　　　console.log(ports)
　　}
)

打包

1. 手动下载npm run build需要的安装包

• 点击electron下载对应的electron版本。放到C:\Users\admin\AppData\Local\electron\cache，2个文件一个.zip一个是SHASUMS256.txt后缀背后要加上版本号eg:SHASUMS256.txt-9.3.1
• 下载nsis
• 下载nsis-resources
• 下载winCodeSign
  将上面下载的安装包解压放入对应的文件夹，如C:\Users\liufeng\AppData\Local\electron-builder\cache\nsis，放如nsis和nsis-resources文件夹

2. 直接npm run build（一般是不成功的），问题看下文。

问题点

运行问题

• Node版本不匹配
  
  解决办法：安装electron-rebuild之后，运行./node_modules/.bin/electron-rebuild.cmd

npm install --save-dev electron-rebuild

• Could not locate the bindings file. Tried:
  
  解决办法：npm rebuild
• 使用vue-electron脚手架进行vuex赋值时失败的解决办法：注释掉store/index.js里面createSharedMutations()

打包问题

• 因为连接的是国外的网站，而第一次打包又要不断从github获取资源，导致连接超时:手动下载

electron打包失败：  part download request failed with status code 403

• 打包成功之后，运行白屏
  解决办法：在./electron-vue/webpack.renderer.config.js目录下修改let whiteListedModules = ['vue', 'vue-router','axios','vuex','vue-electron']
• 解决下载不了安装包的问题，github下载缓慢
  将github路径复制下来https://github.com/electron-userland/electron-builder-binaries.git，打开码云，选择从GitHub导入
  
  类似于GitHub新建项目一样，然后将项目下载成.zip
  
  下载可能需要几分钟，耐心等待即可，下载完成之后可以看到文件目录如下：
  
• 文件放置位置
  当你成功手动将electron、nsis、nsis-resources、winCodeSign文件下载之后，将他们分别放到文件目录如下：
  

• 没有外网时打包遇到的问题

1. 注意在外安装依赖的时候选择局部安装，如上。
2. 当打包的时候将包都放进了对应的目录之后报错

 electron-builder  version=22.9.1 os=10.0.19041
  • loaded configuration  file=package.json ("build" field)
  • electron-rebuild not required if you use electron-builder, please consider to remove excess dependency from devDependencies

To ensure your native dependencies are always matched electron version, simply add script `"postinstall": "electron-builder install-app-deps" to your `package.json` 
  • writing effective config  file=build\builder-effective-config.yaml
  • rebuilding native dependencies  dependencies=@serialport/[email protected] platform=win32 arch=x64
  • install prebuilt binary  name=@serialport/bindings version=9.0.3 platform=win32 arch=x64
  • build native dependency from sources  name=@serialport/bindings
                                          version=9.0.3
                                          platform=win32
                                          arch=x64
                                          reason=prebuild-install failed with error (run with env DEBUG=electron-builder to get more information)
                                          error=prebuild-install info begin Prebuild-install version 6.0.0
    prebuild-install WARN install prebuilt binaries enforced with --force!
    prebuild-install WARN install prebuilt binaries may be out of date!
    prebuild-install info looking for cached prebuild @ C:\Users\liufeng\AppData\Roaming\npm-cache\_prebuilds\ffa09e-bindings-v9.0.3-electron-v80-win32-x64.tar.gz   
    prebuild-install http request GET https://github.com/serialport/node-serialport/releases/download/@serialport/[email protected]/bindings-v9.0.3-electron-v80-win32-x64.tar.gz
    prebuild-install WARN install getaddrinfo ENOTFOUND github.com

  ⨯ cannot execute  cause=exit status 1
                    out=
    > @serialport/[email protected] install F:\git-program\electron-vue-serialport-master\node_modules\@serialport\bindings
    > prebuild-install --tag-prefix @serialport/bindings@ || node-gyp rebuild


    F:\git-program\electron-vue-serialport-master\node_modules\@serialport\bindings>if not defined npm_config_node_gyp (node "C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin\\..\..\node_modules\node-gyp\bin\node-gyp.js" rebuild )  else (node "C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js" rebuild )

                    errorOut=prebuild-install WARN install getaddrinfo ENOTFOUND github.com
    gyp WARN install got an error, rolling back install
    gyp ERR! configure error
    gyp ERR! stack Error: This is most likely not a problem with node-gyp or the package itself and
    gyp ERR! stack is related to network connectivity. In most cases you are behind a proxy or have bad
    gyp ERR! stack network settings.
    gyp ERR! stack     at Request. (C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\install.js:171:21)
    gyp ERR! stack     at Request.emit (events.js:314:20)
    gyp ERR! stack     at Request.onRequestError (C:\Program Files\nodejs\node_modules\npm\node_modules\request\request.js:881:8)
    gyp ERR! stack     at ClientRequest.emit (events.js:314:20)
    gyp ERR! stack     at TLSSocket.socketErrorListener (_http_client.js:469:9)
    gyp ERR! stack     at TLSSocket.emit (events.js:314:20)
    gyp ERR! stack     at emitErrorNT (internal/streams/destroy.js:106:8)
    gyp ERR! stack     at emitErrorCloseNT (internal/streams/destroy.js:74:3)
    gyp ERR! stack     at processTicksAndRejections (internal/process/task_queues.js:80:21)
    gyp ERR! System Windows_NT 10.0.19041
    gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild"        
    gyp ERR! cwd F:\git-program\electron-vue-serialport-master\node_modules\@serialport\bindings
    gyp ERR! node -v v14.12.0
    gyp ERR! node-gyp -v v5.1.0
    gyp ERR! not ok
    npm ERR! code ELIFECYCLE
    npm ERR! errno 1
    npm ERR! @serialport/[email protected] install: `prebuild-install --tag-prefix @serialport/bindings@ || node-gyp rebuild`
    npm ERR! Exit status 1
    npm ERR!
    npm ERR! Failed at the @serialport/[email protected] install script.
    npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

    npm ERR! A complete log of this run can be found in:
    npm ERR!     C:\Users\liufeng\AppData\Roaming\npm-cache\_logs\2020-12-10T14_38_55_357Z-debug.log

                    command='C:\Program Files\nodejs\node.exe' 'C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js' rebuild @serialport/[email protected]
                    workingDir=

看报错提示：
C:\Users\liufeng\AppData\Roaming\npm-cache\_prebuilds\ffa09e-bindings-v9.0.3-electron-v80-win32-x64.tar.gz prebuild-install http request GET https://github.com/serialport/node-serialport/releases/download/@serialport/[email protected]/bindings-v9.0.3-electron-v80-win32-x64.tar.gz
当本地目录下没有，会尝试从git下载，所以没有外网的朋友在拷贝的时候不能漏了这个文件。

暂时记录这么多的问题，一边使用一边记录的问题，所以写的比较乱，还有一些稀奇古怪的问题，没有记录下来，大概率是依赖没下好，或者跟本机之前配置的环境有冲突，如有问题，欢迎指正。