vue3+electron12+dll を使用してクライアント構成を開発する方法

ウェアハウスのソースを変更する

電子バージョンが不明なため、ビルド後にサーバーが利用可能で白い画面が開く状況が発生する可能性があるため、対処する必要があります慎重に。コードのロールバックを容易にするために、利用可能なバージョンをコミットするのが最善です。より良い情報をお持ちの方がいらっしゃいましたら、共有していただければ幸いです。

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

npm set config registry http://registry.npm.taobao.org/
npm set config chromedriver_cdnurl http://registry.npm.taobao.org/chromedriver
npm set config electron_mirror http://registry.npm.taobao.org/electron/
npm set config electron_builder_binaries_mirror http://registry.npm.taobao.org/electron-builder-binaries/

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

Startup

対応する起動コマンドは package.json にアセンブルされています。

• npm run electric:serve を使用して開発を開始します

• #npm で Electron:build を実行します。プロダクションをコンパイルしてパッケージ化します。

##vue-devtools を置き換えます。

src/ の下にあるプロジェクト プロジェクトを置き換えます。背景 .ts は Electron の起動ディレクトリです。開発環境では、以下のような起動待ち時間が長くなる場合があります。

Launching Electron...

拡張機能の取得に失敗しました。あと 4 回

拡張機能の取得に失敗しました。あと 3 回試行します。
拡張機能の取得に失敗しました。あと 2 回試行します。
拡張機能の取得に失敗しました。あと 1 回試行します。

理由は次のとおりです。プロジェクトはオンラインの Google ストアからダウンロードする必要がありますが、vue-devtools の読み込みに失敗しました。

ツールをロードするために多くの方法を試しましたが、すべて失敗したため、一時的な方法はツールを削除することです。コードが見つかったので、installExtension

app.on('ready', async () => {
  if (isDevelopment && !process.env.IS_TEST) {
    // Install Vue Devtools
    try {
    //  await installExtension(VUEJS_DEVTOOLS)
    } catch (e) {
      console.error('Vue Devtools failed to install:', e.toString())
    }
  }
  createWindow()
})

を削除するだけです。以前に多くの方法を試しましたが、うまくいきませんでした。その後、以下を注意深く比較したところ、いくつかの問題が見つかりました。

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

import {session} from 'electron'

app.on('ready', async () => {
  if (isDevelopment && !process.env.IS_TEST) {
    // Install Vue Devtools
    try {
    const vue_devtools = 'ljjemllljcmogpfapbkkighbhhppjdbg-6.0.0-beta-13-Crx4Chrome.com'
    await session.defaultSession.loadExtension(path.resolve(vue_devtools))
    } catch (e) {
      console.error('Vue Devtools failed to install:', e.toString())
    }
  }
  createWindow()
})

に置き換えます。プロジェクトを開始すると、vue の拡張機能が表示されます。

(node:5904) ExtensionLoadWarning: E​​:\scan\vue3_electron\ljjemllljcmogpfapbkghbhhppjdbg-6.0.0-beta-13-Crx4Chrome.com:

認識されないマニフェスト キー 'browser_action での拡張機能の読み込みに関する警告'.

認識できないマニフェスト キー 'update_url'.
権限 'contextMenus' が不明であるか、URL パターンの形式が不正です。
ファイル名またはディレクトリ名 _metadata の拡張子を読み込むことができません。「_」で始まるファイル名は使用のために予約されています
(警告が作成された場所を表示するには、`electron --trace-warnings ...` を使用します)

これは無視してかまいません。煩わしいプロンプトを表示したくない場合は、tools

Notes