💚electron-builderを使ってvueアプリケーションのパッケージを作成

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
      }
    }
  }
}

https://nklayman.github.io/vue-cli-plugin-electron-builder/guide/configuration.html#configuring-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で自動アップデートに対応