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

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

もっと見る

人気の記事

アサシンのクリードシャドウズ：シーシェルリドルソリューション

3週間前 By DDD

Windows11 KB5054979の新しいものと更新の問題を修正する方法

2週間前 By DDD

Atomfallのクレーンコントロールキーカードを見つける場所

3週間前 By DDD

R.E.P.O.で節約説明した（そしてファイルを保存）

1 か月前 By 尊渡假赌尊渡假赌尊渡假赌

アサシンクリードシャドウ - 鍛冶屋を見つけて武器と鎧のカスタマイズを解除する方法

4週間前 By DDD

もっと見る

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

もっと見る

ホットトピック

Gmailメールのログイン入り口はどこですか？

7563

15

CakePHP チュートリアル

1385

52

Steamのアカウント名の形式は何ですか

84

11

Win11 Activation Key Permanent

61

19

NYTの接続はヒントと回答です

28

99

もっと見る

Related knowledge

Nvgpucomp64.dll は Windows PC ゲームをクラッシュさせます。 Mar 26, 2024 am 08:20 AM

Nvgpucomp64.dll が原因でゲームが頻繁にクラッシュする場合は、ここで提供される解決策が役立つ可能性があります。この問題は通常、グラフィック カード ドライバーが古いか破損していること、ゲーム ファイルが破損していることなどが原因で発生します。これらの問題を修正すると、ゲームのクラッシュに対処するのに役立ちます。 Nvgpucomp64.dll ファイルは、NVIDIA グラフィックス カードに関連付けられています。このファイルがクラッシュすると、ゲームもクラッシュします。これは通常、LordsofttheFallen、LiesofP、RocketLeague、ApexLegends などのゲームで発生します。 N の場合、Nvgpucomp64.dll が Windows PC 上のゲームをクラッシュさせる

CoreMessaging.dll ファイルが Windows システム ディレクトリに見つからない問題の分析 Feb 11, 2024 pm 11:42 PM

多くのユーザーは、コンピューターを使用してゲームをプレイするときに、coremessaging.dll が見つからないというメッセージが表示されます。多くのユーザーは、ソフトウェアまたはゲームに問題があるとすぐに考えると思います。実際には、そうではありません。コンピューターに dll ファイルがありません。ユーザーは coremessaging.dll ファイルをダウンロードできます。このサイトでは、Windows システム ディレクトリに CoreMessaging.dll ファイルが存在せず、見つからないという問題の分析をユーザーに注意深く紹介します。 Windows システム ディレクトリに CoreMessaging.dll ファイルが存在せず、見つからない問題の分析 1. CoreMessaging.dll ファイルをダウンロードします。 2.

vue3+vite: src に画像を動的にインポートするために require を使用するときのエラーを解決する方法 May 21, 2023 pm 03:16 PM

vue3+vite:src は、イメージとエラー レポートと解決策を動的にインポートするために require を使用します。vue3+vite は複数のイメージを動的にインポートします。vue3。TypeScript 開発を使用している場合、イメージを導入するために require のエラー メッセージが表示されます。requireisnotdefined は使用できません。 vue2 のような imgUrl:require(' .../assets/test.png') は、typescript が require をサポートしていないため、インポートされます。そのため、import が使用されます。解決方法は次のとおりです: awaitimport を使用します

vue3 プロジェクトで tinymce を使用する方法 May 19, 2023 pm 08:40 PM

tinymce はフル機能のリッチ テキスト エディター プラグインですが、tinymce を vue に導入するのは他の Vue リッチ テキスト プラグインほどスムーズではありません。tinymce 自体は Vue には適しておらず、@tinymce/tinymce-vue を導入する必要があります。外国のリッチテキストプラグインであり、中国語版を通過していないため、公式 Web サイトから翻訳パッケージをダウンロードする必要があります (ファイアウォールをバイパスする必要がある場合があります)。 1. 関連する依存関係をインストールします npminstalltinymce-Snpminstall@tinymce/tinymce-vue-S2. 中国語パッケージをダウンロードします 3. スキンと中国語パッケージを導入します. プロジェクトのパブリック フォルダーに新しい tinymce フォルダーを作成し、

Vue3 でページの部分的なコンテンツを更新する方法 May 26, 2023 pm 05:31 PM

ページの部分的な更新を実現するには、ローカル コンポーネント (dom) の再レンダリングを実装するだけで済みます。 Vue でこの効果を実現する最も簡単な方法は、v-if ディレクティブを使用することです。 Vue2 では、v-if 命令を使用してローカル dom を再レンダリングすることに加えて、新しい空のコンポーネントを作成することもできます。ローカル ページを更新する必要がある場合は、この空のコンポーネント ページにジャンプしてから、再びジャンプします。 beforeRouteEnter ガードを空白のコンポーネントに配置します。元のページ。以下の図に示すように、Vue3.X の更新ボタンをクリックして赤枠内の DOM を再読み込みし、対応する読み込みステータスを表示する方法を示します。 Vue3.X の scriptsetup 構文のコンポーネントのガードには o しかないので、

Vue3 がマークダウンを解析し、コードのハイライトを実装する方法 May 20, 2023 pm 04:16 PM

Vue はブログ フロントエンドを実装しており、マークダウン解析を実装する必要があり、コードがある場合はコードのハイライトを実装する必要があります。 Vue には、markdown-it、vue-markdown-loader、marked、vue-markdown など、マークダウン解析ライブラリが多数あります。これらのライブラリはすべて非常に似ています。ここではMarkedが使用され、コード強調表示ライブラリとしてhighlight.jsが使用されます。 1. 依存ライブラリをインストールする vue プロジェクトの下でコマンド ウィンドウを開き、次のコマンド npminstallmarked-save//marked を入力して、マークダウンを htmlnpmins に変換します。

win7システムでlibcurl.dllが見つからない問題を解決するにはどうすればよいですか? Win7 が libcurl.dll ファイルを見つけることができない解決策 Feb 12, 2024 am 08:15 AM

win7システムでlibcurl.dllが見つからない問題を解決するにはどうすればよいですか?一般に、dll ファイルが原因で一部のプログラムが正常に使用できなくなりますが、多くのユーザーはこの問題に直面し、解決方法がわかりません。この状況に対応して、本日、編集者は詳細な解決策を大多数のユーザーと共有します。今日は win7 が使用されることを願っています。チュートリアルは多くのユーザーに役立つので、見てみましょう。 win7 システムで libcurl.dll が見つからない場合の解決策 1. libcurl.dll ファイルをダウンロードします。 2. ダウンロード後、ファイルを対応するフォルダーに置きます。32 ビットおよび 64 ビット オペレーティング システムのパスは次のとおりです。32 ビット Win7 オペレーティング システムの場合、ファイルを C:\Windows\SYSTEM32 に直接コピーします。

Vue3 でアバターを選択してトリミングする方法 May 29, 2023 am 10:22 AM

最終的な効果は、VueCropper コンポーネントのyarnaddvue-cropper@next をインストールすることです。上記のインストール値は Vue3 用です。Vue2 の場合、または他の方法を参照したい場合は、公式 npm アドレス: 公式チュートリアルにアクセスしてください。また、コンポーネント内で参照して使用するのも非常に簡単です。必要なのは、対応するコンポーネントとそのスタイル ファイルを導入することだけです。ここではグローバルに参照しませんが、import{userInfoByRequest}from'../js/api を導入するだけです。 ' コンポーネント ファイルにインポートします。import{VueCropper}from'vue-cropper&

See all articles