vuejs vuetify アプリケーションでの Electron エラーを解決する方法

Question

vuejs/vuetify アプリケーションで Electron を動作させるのに問題があります。

次のエラーを修正する方法がわかりません。

私が使用しているツールのバージョンは次のとおりです:

vue --version = @vue/cli 5.0.4

node-v=v18.12.1

パッケージ.json "依存関係": { "core-js": "^3.8.3", "vue": "^2.6.14", "vuetify": "^2.6.0"

管理コマンド ラインから次のコマンドを使用してアプリケーションを作成しました:

-vue は testvue02

を作成します

-cd testvue02

-vue add vuetify - 「npm runserve」を実行したところ、コンパイルされてデフォルトが表示されました vue/vuetify ウェブページ

-vue 電子ビルダーの追加

-npm 電子:サービスを実行します

これはコンソール出力です:

ああああ

Answer 1

＃＃＃＃＃＃理由＃＃＃＃＃＃

NodeJs v18 は、webpack v4 モジュールへの重大な変更を引き起こす SSL プロバイダーのセキュリティ脆弱性を修正します。参照: https://stackoverflow.com/a/73027407/20130767

手っ取り早い解決策は Node.js v16 にダウングレードすることですが、これによりビルドがセキュリティの脅威にさらされてしまいます (上記のリファレンスで説明されています)。 Node.js v18 で動作する、より良いソリューションの概要を以下に示します。 ＃＃＃＃＃＃解決＃＃＃＃＃＃ 私もまったく同じ問題を抱えていて、次の方法で解決しました:

webpack 5.0.0 にアップグレードします。 package-lock.json ファイルに移動し、4.x.x Webpack のすべてのバージョンを 5.0.0 に変更します。 (Ctrl F を押して「webpack」を検索します:「4 は webpack のバージョン 4 をすべて検索します)

ノード モジュールを削除し、npm iを使用して再インストールします

完了すると Electron が起動しますが、「background.js」package.json ファイルに「DeprecationWarning: Invalid 'main' field...」というエラーが表示される場合があります。 package.json から「main」キーと値を削除してください。次に、「background.js」を src フォルダーに移動します。 「preload.js」ファイルがある場合は、「background.js」ファイルでそのパスを適宜編集します。