siromathics

Vue CLI Plugin Electron BuilderでVue.jsのプロジェクトをElectronアプリケーション化する

created:

Electronアプリケーション化されたVue.jsプロジェクトのテンプレートとしてSimulatedGREG/electron-vueがありますが、更新が滞っていたりElectronのバージョンが古かったりとあまり良くない面があります。

vue-cli3系からは、Vue CLI Plugin Electron Builder というプラグインでElectronアプリケーション化することができるので、こちらを使用した方が良いと思います。

@vue/cliでVue.jsのプロジェクトを作る

まだインストールしていない場合は@vue/cliをインストールします(2系まではvue-cliという名称でした)。

npm install -g @vue/cli

バージョンを確認して3系になっていれば大丈夫です。

vue --version

プロジェクトを作りたいディレクトリに移動して、下記コマンドを実行します。vue-electron-testとなっている箇所がプロジェクト名になります。

vue create vue-electron-test

プロジェクトの設定を聞かれますが、今回はdefaultとします。

Vue CLI Plugin Electron Builderをインストールする

出来上がったら、プロジェクトのディレクトリに移動して下記コマンドを実行します。

vue add electron-builder

Electronのバージョンを聞かれますが、5系で良いと思います。 これで、Vue CLI Plugin Electron Builderがインストールされました。

開発環境、実行ファイル生成

下記コマンドを実行するとElectronが開発環境で立ち上がります。

yarn electron:serve

実行ファイルを生成する際は、下記コマンドを実行するとプロジェクトディレクトリ内にdist_electronディレクトリが生成され、その中にインストーラやexeファイルが生成されます(Windowsの場合)。

yarn electron:build

なお、Electronの設定(ウィンドウサイズなど)はsrc/background.jsファイルに書かれています。

参考

タグ一覧