gosoly

ゆっくりと趣味に浸る。

vue-cliで作ったWebアプリケーションをElectron化させる

最近フロントエンドを触る機会が多く、Vueを使って開発してます。
特にFirebaseと組み合わせると、簡単に認証なども組めるのでとても便利です。

vue-cliはこちらの記事が綺麗にまとまってます。

qiita.com

そんなvue-cliで構築したプロジェクトが、簡単にElectronのアプリケーションにできるようだったので試してみたメモです。
ほぼ公式のドキュメントのままで、一点だけ躓いた点です。

プロジェクトにElectronを導入する

公式のドキュメントを参照し構築

nklayman.github.io

vue add electron-builder

サーバー起動

yarn electron:serve

ビルド

yarn electron:build

ビルドにコンポーネントが読み込まれない

テストで実行させたときはすんなり動いたのですが、ビルド後のアプリケーションの初回起動時にコンポーネントが読み込まれない問題がありました。

原因

f:id:ban367:20190414161200p:plain

どうやらRouterをヒストリーモードにしていると初回の起動時にうまく読み込まれないようです。
Electron化してしまえばヒストリーモードの有無は影響がないはずなので、この設定している一行を消して終了です!