vueで作成したwebアプリケーションをelectronでパッケージングする必要があったのでググって頻繁に出てくるelectron-packagerを使って作成していたけど、インストーラーも作成するには別パッケージを使ったりビルド環境が不安定であったりとツラみが深かった。だけど最近はelectron-builderを使うのが安い早い美味いだったので設定方法を書き記す。
この記事の要点
- electron-packagerは古い
- electron-builderを使おう
- vueで使うならvue-cli-plugin-electron-builder も使おう
- インストーラー形式のパッケージがすぐに作成できる
- この記事を読んでわかること
- vueプロジェクトにelectronのビルド設定を追加する方法
- electronのビルド設定変更
- Windowsビルド設定
ちなみにドキュメントページは以下です
https://www.electron.build
https://nklayman.github.io/vue-cli-plugin-electron-builder/
vueプロジェクトにelectronのビルド設定を追加する方法
$ vue create example-vue-electron
$ cd example-vue-electron
$ vue add electron-builder
? Choose Electron Version ^3.0.0
$ npm run electron:build
以上でパッケージ作成ができるようになった。mac環境で作成するとmac環境向けのパッケージが作られる
ちなみに
$ npm run electron:serve
でelectronが起動して開発ができるようになっています。お手軽…
electronのビルド設定
electronのビルドセッティングのサンプルとしてアイコンを指定します。
ビルドセッティングはelectron-builderのデフォルトだとpackage.jsonだけど、vueで使用するためのvue-cli-plugin-electron-builderの場合は vue.config.js に設定する必要がある。
以下のファイル指定を行う。
// vue.config.js
module.exports = {
pluginOptions: {
electronBuilder: {
builderOptions: {
// options placed here will be merged with default configuration and passed to electron-builder
}
}
}
}アイコンの指定はこう
// vue.config.js
module.exports = {
pluginOptions: {
electronBuilder: {
builderOptions: {
mac: {
icon: 'build/icon.png',
},
}
}
}
}https://www.electron.build/configuration/dmg
ビルドするとアイコン画像が適応されています
ちなみに即時実行できるapp形式のファイルもビルドされていて、dist_electron/mac/にある
本来であればicnsアイコンを作成する必要があるのですがelectron-builderなら512*512サイズのpng画像があればokです
Windowsビルド設定
windows向けを作成
package.jsonのbuild設定に以下のオプションを設定
"electron:build": "vue-cli-service electron:build --mac --win",
example-vue-electron Setup 0.1.0.exeが作成されるのでそれを起動すればインストールが可能
補足: windows向けのショートカットを自動作成する
windows向けだとインストール後にアプリケーションがどこに入ったのかわからなくなるのでショートカットをデスクトップに作成するように設定する。electron-buiilderのオプションで存在するのだが(createDesktopShortcut)なぜか作成されない🤔のでパッケージ追加で設定する
npm install --save electron-squirrel-startup
// src/background.js
const { app } = require('electron');
// ....
if(require('electron-squirrel-startup')) app.quit();補足: Linuxでmac環境のアプリケーションを作成
MacでないとMacのインストーラー形式のdmgが作成できない。docker環境などのLinuxでビルドをする場合にはMacのターゲットをzipに変更する必要がある
// vue.config.js
module.exports = {
pluginOptions: {
electronBuilder: {
builderOptions: {
mac: {
icon: 'build/icon.png',
target: 'zip',
},
win: {
icon: 'build/icon.png',
}
}
}
}
}まとめ
以上の設定をしたリポジトリはここで公開しています
https://github.com/soramugi/example-vue-electron
electron-packagerで作成していた頃は
- vueをビルド
- 成果物の dist/ をコピー
- electronのビルド用ディレクトリにペースト
- electronのビルド実行
- インストーラーのビルド実行
と3ステップ踏んでいたので、1パッケージにまとまって設定も簡潔なので楽になりました。
あとは以下を調べようかと
- コード著名
- AutoUpdate指定
- Publish指定
AutoUpdate(自動アップデート)周りが調査途中です。パッケージは作成できたんだけどアップデートしないので何かが間違ってそうな雰囲気。早めにまとめておきたい…
続きを書きました : electron-builderで自動アップデートに対応
☘️だいたい楽しい☘️ 