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文件夹
  1. 直接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/bindings@9.0.3 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/bindings@9.0.3/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/bindings@9.0.3 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.<anonymous> (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/bindings@9.0.3 install: `prebuild-install --tag-prefix @serialport/bindings@ || node-gyp rebuild`
    npm ERR! Exit status 1
    npm ERR!
    npm ERR! Failed at the @serialport/bindings@9.0.3 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/bindings@9.0.3
                    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/bindings@9.0.3/bindings-v9.0.3-electron-v80-win32-x64.tar.gz
当本地目录下没有,会尝试从git下载,所以没有外网的朋友在拷贝的时候不能漏了这个文件。

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

Logo

前往低代码交流专区

更多推荐