vue3+electron12+dll 開発のためのクライアント構成の詳細な説明

現在使用されているバージョンは、@vue/cli4 によって作成された vue3.0 + typescript + electron 12 です。他のバージョンはまだテストされていません。インターネット上の情報は質がまちまちなので、私は時間をかけて一つずつ実験し、現時点での最善の解決策にたどり着きました。

リポジトリソースを変更する

Electron 版の未知の性質上、serve は利用できるもののビルド後に白い画面が表示される可能性がありますので注意が必要です。コードのロールバックを容易にするために、バージョンが利用可能になったらコミットするのが最善です。よりよい情報をお持ちの方は、ぜひ共有してください。

設定を開始する前に、yarn と npm の rc ファイルを少し変更することができます。コマンドまたはファイルを使用して、.npmrc または .yarnrc を直接変更します。これらの 2 つのグローバル設定ファイルは通常、C:\user\現在のアカウントフォルダーにあります。または、現在のプロジェクトに新しいファイルコマンド rc ファイルを作成して、ローカルで設定を変更します。
ネットワークの問題により、電子ダウンロードが失敗する可能性があるため、Taobao ソースまたは Huawei ソースに変更します。

npm 設定レジストリ http://registry.npm.taobao.org/
npm で chromedriver_cdnurl を設定し、http://registry.npm.taobao.org/chromedriver を設定します。
npm で electron_mirror の設定を設定します http://registry.npm.taobao.org/electron/
npm で electron_builder_binaries_mirror の設定を設定します http://registry.npm.taobao.org/electron-builder-binaries/

インストールプロセス中に、vue create <プロジェクト名> を使用して vue3 バージョンを選択します。コンテンツが作成されたら、プロジェクトディレクトリに入り、vue electron-builder を追加して electron を構成し、現在のバージョン 12 を選択します。

起動する

対応する起動コマンドは package.json にまとめられています。

開発を開始するにはnpm run electron:serveを使用します。
npm run electron:build コンパイルしてパッケージ化

vue-devtoolsを置き換える

プロジェクト配下では、src/background.ts が electron の起動ディレクトリになっています。開発環境では、起動待ち時間が長くなると、次のような状況が発生します。

Electron を起動しています...
拡張機能の取得に失敗しました。さらに 4 回試行します
拡張機能の取得に失敗しました。さらに 3 回試行します
拡張機能の取得に失敗しました。あと 2 回試行します
拡張機能を取得できませんでした。あと 1 回試行します

これは、プロジェクトが vue-devtools をダウンロードして読み込むために Google ストアに接続する必要があり、それが失敗したためです。

ツールをロードする方法をいろいろ試しましたが、すべて失敗したため、一時的な解決策としてツールを削除します。コードが見つかったら、installExtensionを削除するだけです

app.on('ready', 非同期() => {
  if (isDevelopment && !process.env.IS_TEST) {
    // Vue Devtools をインストール
    試す {
    // installExtension(VUEJS_DEVTOOLS) を待機します
    } キャッチ (e) {
      console.error('Vue Devtools のインストールに失敗しました:', e.toString())
    }
  }
  ウィンドウの作成()
})

これまでいろいろな方法を試してきましたが、効果はありませんでした。その後、慎重に比較してみると、いくつか問題が見つかりました。

vue3 と vue2 の vue-devtools は異なるため、vue2 の dev-tools を vue3 で使用することはできません。そのため、vue3 の対応する開発ツールをダウンロードする必要があります。 vue2 の最新バージョンは 5.x ですが、vue3 の最新バージョンは 6.x ベータ版です。このバージョンのプラグインは、crx4chrome からダウンロードできます。ダウンロードしたcrxを解凍し、プロジェクトのルートディレクトリにコピーし、セッション読み込みを使用して元のawait installExtension(VUEJS_DEVTOOLS)を次のように置き換えます。

'electron' から {session} をインポートします

app.on('ready', 非同期() => {
  if (isDevelopment && !process.env.IS_TEST) {
    // Vue Devtools をインストール
    試す {
    const vue_devtools = 'ljjemllljcmogpfapbkkighbhhppjdbg-6.0.0-beta-13-Crx4Chrome.com'
    session.defaultSession.loadExtension(path.resolve(vue_devtools)) を待機します。
    } キャッチ (e) {
      console.error('Vue Devtools のインストールに失敗しました:', e.toString())
    }
  }
  ウィンドウの作成()
})

プロジェクトを開始すると、vue の拡張子を表示できます。のために

(ノード:5904) ExtensionLoadWarning: E:\scan\vue3_electron\ljjemllljcmogpfapbkkighbhhppjdbg-6.0.0-beta-13-Crx4Chrome.com で拡張機能をロード中に警告が発生しました:
認識されないマニフェストキー 'browser_action'。
認識されないマニフェストキー 'update_url'。
権限 'contextMenus' が不明であるか、URL パターンの形式が正しくありません。
ファイル名またはディレクトリ名が _metadata の拡張子を読み込むことができません。"_" で始まるファイル名は、システムで使用するために予約されています。
(警告が作成された場所を表示するには、`electron --trace-warnings ...` を使用します)

無視できます。迷惑なプロンプトを表示したくない場合は、ツールのmanifest.json内の対応するコンテンツを削除できます。

予防

script-setup をモジュールとして使用すると、サーブフェーズでは正常に動作しますが、ビルド後にコンポーネントが読み込まれず、ページが空白になり、エラーが報告されません。理由は不明です。

electron-edge-js を使用して、c# で開発された dll ファイルをロードします。構成プロセスは少し面倒です。解決策を探すのに 2 日間費やしましたが、役に立ちませんでした。解決策は次のとおりです。適切な薬を処方する必要があります。

C++ と C# で開発された DLL は異なるローダーを使用し、C++ は FFI-NAPI を使用します。

エッジを使用するには、3つの構成を同時に追加する必要があります

何も設定されていない場合は、Uncaught (in promise) Error: Cannot find module '...\node_modules\electron\dist\resources\electron.asar\renderer\native\win32\x64\14.16.0\edge_nativeclr' が発生します。このとき、vue.config.js ファイルに追加する必要があります。設定ファイルがない場合は、package.json と同じ階層に作成する必要があります。

モジュール.エクスポート = {
    プラグインオプション: {
        電子ビルダー: {
            外部: ['electron-edge-js']
        }
    }
}

設定が有効になっていない場合、__dirname __filenameなどのNode.js組み込み変数は使用できません。
キャッチされない（promise内）ReferenceError: __dirnameが定義されていません。まず、新しいBrowserWindowを設定する必要があります。

{      
    // Node.js APIを使用する場合は、パッケージ化時にこれをtrueに設定する必要があります
    ノード統合: true、
    // 同時に、これをfalseに設定する必要があります
    // 設定されていない場合は、Uncaught ReferenceError: require が定義されていないことを報告します
    コンテキスト分離: false  
}

上記の設定が完了すると、Uncaught (in promise) TypeError: fs.existsSync is not a functionが報告されます。
この時点で、vue.config.jsに構成項目を追加し続ける必要があります。

モジュール.エクスポート = {
    プラグインオプション: {
        電子ビルダー: {
            外部: ['electron-edge-js'],
            // これも有効にする必要があり、参照関係はコンパイルフェーズ中に nodeIntegration: true に書き込まれます。 
        }
    }
}

このオプションを単独で設定し、新しい BrowserWindow に対して nodeIntegration: true を有効にしないと、Uncaught ReferenceError: require is not defined が発生します。

また、dll を配置するフォルダについては、リソースを格納するためにプロジェクトルートディレクトリにリソースが作成されるのが一般的であり、プロジェクトのパッケージ化処理中にリソースディレクトリが直接パッケージ化されることはないため、エラーを防ぐためにリソース構成を増やす必要があります。ファイル参照については、開発環境では現在ご覧になっている構造になっています。コンパイルとパッケージ化後は、インストールディレクトリ下の resources ディレクトリになります。そのため、本番環境と開発環境では参照ファイルに若干の違いがあります。実験後にファイル参照を確認できます。

 モジュール.エクスポート = {
     プラグインオプション: {
         電子ビルダー: {
             外部: ['electron-edge-js'],
             // これも有効にする必要があり、参照関係はコンパイルフェーズ中に nodeIntegration: true に書き込まれます。 
             ビルダーオプション:{
                 追加リソース: {
                     // 静的ファイルを指定された場所にコピーします。そうしないと、'resources/' からファイルが見つからないというメッセージが表示されます。
                     に： '。/'
                 },
             }
         }
     }
 }

ファイルアクセスディレクトリメソッドを提供し、異なるオペレーティングシステムでアプリのリソースディレクトリを直接取得できます。ウィンドウの場合、process.platform==='win32'

定数パス = require('path')
エクスポート関数 getAppResourcePath (filePath: 文字列) {
    プロセスプラットフォームが 'darwin' の場合 || プロセスプラットフォームが 'linux' の場合 {
        process.env.NODE_ENV === '開発'の場合{
            path.resolve('resources/' + filePath) を返します。
        } それ以外 {
            path.join(__dirname, '..') + filePath を返します。
        }
    } それ以外 {
        path.resolve('resources/' + filePath) を返します。
    }
}

セットアップ構文を使用する場合は、それを導入するために require('electron-edge-js') を使用する必要があります。インポートは使用できません。そうしないと、セットアップ構文の代わりに、構文エラー: TypeError: Cannot read property 'content' of null が報告されます。直接インポートできます。

ボーダーレスウィンドウ

システム自体にはフレームがあります。フレームをカスタマイズする必要がある場合は、フレームレス設定を使用できます。操作ウィンドウをドラッグするためにカスタムコンポーネント（div.custom-frame-titleなど）を使用する必要がある場合は、対応する要素にスタイルを追加する必要があります。

 .カスタムフレームタイトル{
   -webkit-user-select: none; // この項目はテキスト選択との競合を防ぎます -webkit-app-region: drag; // この項目はシステム固有のステータスバーです}

フロントエンドとバックエンドの通知

'electron' から {ipcMain,ipcRenderer} をインポートします。

Electron には利用可能な API が多数ありますが、最も重要なのは、UI プロセスとシステムプロセス間の通信に使用される ipcMain と ipcRenderer です。 vue では、システムからメッセージを受信するには ipcRenderer.on('eventname') を使用し、システムに通知を送信するには ipcRenderer.send('eventname') を使用します。同様に、メインスレッドでは ipcMain を使用できます。

ipcは通常、カスタムタイトルバーやウィンドウ自体の操作を必要とするその他のイベントと組み合わせて次の操作を実行します。

win.minimize() //ウィンドウを最小化 win.maximize() //ウィンドウを最大化 win.close() //ウィンドウを閉じる win.hide() //ウィンドウを非表示

最後に

その他の方法は従来の Vue 開発と変わりませんが、システムと UI のやり取りについては、さらに API ドキュメントを読む必要があります。

vue3+electron12+dll クライアント開発の詳細設定に関するこの記事はこれで終わりです。vue3+electron12+dll クライアント設定に関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: