The Pragmatic Ball boy

iOSを中心にやってる万年球拾いの老害エンジニアメモ

electron-vueのproductionビルドで気をつけるところ

electron-vueでアプリを作ってみて、npm run devで開発環境で動かしたときは動いたけど、npm run buildで本番向けにビルドしたときは動かないみたいなことがちょいちょいあったので、それの対応方法です。

ファイルが見つからない

productionビルドの場合はwebpackでバンドルされてdist以下に配置されるので、devのときとディレクトリ構造が異なってきます。 なので__dirnameなどを使ってファイルのパスを指定していると駄目です。

下に記載のように__staticを用いる必要があります

Main Process · electron-vue

path.join(__static, 'image.png')

ファイルの保存ができない

nedbなどで相対パスでファイルに保存するとproductionビルドでは保存に失敗します。

これは、app.getPath()を使ってplatform固有の保存用のパスを取得する必要があります。

  const userData = app.getPath('userData');
  db = new Datastore({
    filename: `${userData}/db/log.db`,
  });

Macにインストールしようとするとセキュリティエラーがでる

作ったアプリをdmgファイルからインストールしようとすると、登録されていないアプリの警告ダイアログが表示されます。

これを出ないようにするには証明書をインストールしてビルドする必要があります。

Mac App Storeを通さずにアプリケーションを配布する手順

Apple Developer ProgramからDeveloper ID ApplicationとDeveloper ID Installerを作ってビルドするマシンに入れれば、あとはnpm run buildするとOK

Windows用のアプリが生成されない

デフォルトではMac版しかないので自分で追加する必要があります

package.jsonのscriptsにwindows向けのを追加します。

 "scripts": {
    "build:win": "node .electron-vue/build.js && electron-builder -w",

Macだとビルドするにはwineをインストールする必要がありますので、homebrewなどを使ってインストールしておきましょう。