1.electron-builder組件使用原因

electron-vue 組件無法創(chuàng)建vue-cli 3.0項(xiàng)目，改用electron-builder插件
https://nklayman.github.io/vue-cli-plugin-electron-builder/guide/#installation
vue-cli-plugin-electron-builder 和 electron-builder 是一個(gè)東東

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.啟動(dòng)web項(xiàng)目和啟動(dòng)

啟動(dòng)PC項(xiàng)目

# 開發(fā)
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

打包成安裝包，而非可執(zhí)行文件

elelctron-packager打包只是打包成各個(gè)平臺(tái)下可執(zhí)行文件，并不是安裝包，如果需要打包成安裝包之類的可以參考electron-builder

常見問題

1. 寫代碼的時(shí)候如果考慮到全平臺(tái)的使用，雖然electron可以打造跨平臺(tái)的應(yīng)用，但是前提是你你在代碼中做了相對(duì)應(yīng)的處理，比如使用node在操作linux下面命令以及文件讀取和windows下有所不同，linux下文件有l(wèi)ink格式，我當(dāng)時(shí)寫讀取目錄樹的時(shí)候就用錯(cuò)方法導(dǎo)致將所有l(wèi)ink當(dāng)成文件夾，進(jìn)入死循環(huán)，這只是一個(gè)例子，還要好多坑

2. elelctron-packager打包只是打包成各個(gè)平臺(tái)下可執(zhí)行文件，并不是安裝包，如果需要打包成安裝包之類的可以參考electron-builder

3. 打包成功后執(zhí)行如果直接報(bào)錯(cuò)，這里如果你的代碼沒有問題的話，有很大的原因是你的啟動(dòng)文件main.js或者其他文件的路徑出錯(cuò)，仔細(xì)檢查路徑，修改后重新打包即可

4. 大家可以在electron的中文網(wǎng)上面加electron的交流群來交流學(xué)習(xí)關(guān)于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/go-fs-util@v0.0.0-20190620175131-69a2d4542206/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兩種方式實(shí)現(xiàn)（for Windows）