【Electron学习笔记03】electron-builder组件

1.electron-builder组件使用原因

electron-vue 组件无法创建vue-cli 3.0项目，改用electron-builder插件
https://nklayman.github.io/vue-cli-plugin-electron-builder/guide/#installation
vue-cli-plugin-electron-builder 和 electron-builder 是一个东东

yarn add electron-builder --save-dev

备注: 一直安装失败，考虑将 npm更新 vue全局更新等操作，最终正常

2.在package.json中做如下配置

"build": {
    "appId": "com.xxx.app",
    "mac": {
      "target": ["dmg","zip"]
    },
    "win": {
      "target": ["nsis","zip"]
    }
},
"scripts": {
    "dist": "electron-builder --win --x64"
},

2.启动web项目和启动

启动PC项目

# 开发
yarn electron:serve
npm run electron:serve

# 打包
yarn electron:build
npm run electron:build

打包失败

Error: 'build' in the application package.json (/Users/tzt/Documents/vue/oil-system/dist_electron/bundled/package.json) is not supported since 3.0 anymore. Please move 'build' into the development package.json (/Users/tzt/Documents/vue/oil-system/package.json)

image.png

打包成安装包，而非可执行文件

elelctron-packager打包只是打包成各个平台下可执行文件，并不是安装包，如果需要打包成安装包之类的可以参考electron-builder

常见问题

1. 写代码的时候如果考虑到全平台的使用，虽然electron可以打造跨平台的应用，但是前提是你你在代码中做了相对应的处理，比如使用node在操作linux下面命令以及文件读取和windows下有所不同，linux下文件有link格式，我当时写读取目录树的时候就用错方法导致将所有link当成文件夹，进入死循环，这只是一个例子，还要好多坑

2. elelctron-packager打包只是打包成各个平台下可执行文件，并不是安装包，如果需要打包成安装包之类的可以参考electron-builder

3. 打包成功后执行如果直接报错，这里如果你的代码没有问题的话，有很大的原因是你的启动文件main.js或者其他文件的路径出错，仔细检查路径，修改后重新打包即可

4. 大家可以在electron的中文网上面加electron的交流群来交流学习关于electron的问题

5.安装失败
install electron with Error: EACCES: permission denied, mkdir '/usr/lib/node_modules/electron/electron-tmp-download-4860-1517066058438'

yarn run v1.16.0
$ electron-builder --win --x64
  • electron-builder version=20.44.4
  • loaded configuration file=package.json ("build" field)
  • description is missed in the package.json appPackageFile=/Users/tzt/Documents/vue/oil-system/package.json
  • author is missed in the package.json appPackageFile=/Users/tzt/Documents/vue/oil-system/package.json
  • writing effective config file=dist/builder-effective-config.yaml
  • no native production dependencies
  • packaging       platform=win32 arch=x64 electron=5.0.6 appOutDir=dist/win-unpacked
  • downloading     parts=8 size=61 MB url=https://github.com/electron/electron/releases/download/v5.0.6/electron-v5.0.6-win32-x64.zip
  ⨯ open /Users/tzt/Library/Caches/electron/623225114.zip.part5: permission denied
github.com/develar/go-fs-util.CloseAndCheckError
    /Volumes/data/go/pkg/mod/github.com/develar/[email protected]/fs.go:117
github.com/develar/app-builder/pkg/download.(*Part).download
    /Volumes/data/Documents/app-builder/pkg/download/Part.go:56
github.com/develar/app-builder/pkg/download.(*Downloader).DownloadResolved.func1.1
    /Volumes/data/Documents/app-builder/pkg/download/downloader.go:114
github.com/develar/app-builder/pkg/util.MapAsyncConcurrency.func2
    /Volumes/data/Documents/app-builder/pkg/util/async.go:67
runtime.goexit
    /usr/local/Cellar/go/1.12.6/libexec/src/runtime/asm_amd64.s:1337
 
Error: /Users/tzt/Documents/vue/oil-system/node_modules/app-builder-bin/mac/app-builder exited with code 1

npm install -g electron --unsafe-perm=true --allow-root

参考

electron打包：electron-packager及electron-builder两种方式实现（for Windows）