Electronのビルド周りでつまづいたので、切り分けの流れを書いてみる

前置き

electron-vueでアプリ作ってた
軽い気持ちでCatalina（OS）に上げたらビルドでエラー吐いた
serveは通る

ビルドできない問題対処のためにやったこと

導入ライブラリのバージョンアップ

ncuを入れてやってみたが、serveすら通らなくなった

electron-vueでアプリ作り直し

初期と変わらず。
HalloWorldの状態でもビルド不可

vue createでアプリ作って、electron-builderをadd

HalloWorld -> ビルドOK、アプリも正常に表示されている。
ライブラリ入れてコード移設してビルド -> OK、だが、アプリを開くと白い画面のまま動かず。
serveは正常表示。

とりあえずビルドはできるので、当初の問題は解決。
次の問題解決のための切り分け開始。

白い画面問題対処のためにやったこと

publicPathの追加

vue.config.jsへbaseUrlの追加で解決した、という記事を見かけたため、

module.exports = {
  publicPath: '/'
}

を追加してみたが解決せず。
＃baseUrlではプロパティエラーになった

module.exports = {
  publicPath: './'
}

module.exports = {
  publicPath: '.'
}

上記も試したがNG

切り分けのため、背景色を変えて読み込まれているか確認する

TOP画面に表示されるはずのコンポーネントの背景色を変更
serveでは変更を確認できたがビルド後は変わらず

導入ライブラリを減らす

vue-routerの削除で解決しました。
これが原因、というか、うまく設定できてなかったようで、外したら問題なく表示されました。

まとめ

• OSのアップデートをするときはよく考えましょう
• ライブラリを一気に導入するのはやめましょう