💚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で自動アップデートに対応

投稿者: soramugi

#立川 #ラジオ #electron #WordPress #JavaScript #NodeJS #VueJS #Ruby #Rails #PHP #Symfony #Ubuntu #MySQL #文鳥飼い #インフラ #Jenkins

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google フォト

Google アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中