電子バージョンが不明なため、ビルド後にサーバーが利用可能で白い画面が開く状況が発生する可能性があるため、対処する必要があります慎重に。コードのロールバックを容易にするために、利用可能なバージョンをコミットするのが最善です。より良い情報をお持ちの方がいらっしゃいましたら、共有していただければ幸いです。
設定を開始する前に、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
対応する起動コマンドは package.json にアセンブルされています。
npm run electric:serve を使用して開発を開始します
拡張機能の取得に失敗しました。あと 4 回拡張機能の取得に失敗しました。あと 3 回試行します。
理由は次のとおりです。プロジェクトはオンラインの Google ストアからダウンロードする必要がありますが、vue-devtools の読み込みに失敗しました。
拡張機能の取得に失敗しました。あと 2 回試行します。
拡張機能の取得に失敗しました。あと 1 回試行します。
ツールをロードするために多くの方法を試しましたが、すべて失敗したため、一時的な方法はツールを削除することです。コードが見つかったので、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'.
これは無視してかまいません。煩わしいプロンプトを表示したくない場合は、tools
権限 'contextMenus' が不明であるか、URL パターンの形式が不正です。
ファイル名またはディレクトリ名 _metadata の拡張子を読み込むことができません。「_」で始まるファイル名は使用のために予約されています
(警告が作成された場所を表示するには、`electron --trace-warnings ...` を使用します)
Notes
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
