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

script-setup をモジュールとして使用する場合、サービス提供段階では通常どおり使用できますが、ビルド後にコンポーネントがロードされず、ページが空白で表示され、エラーは報告されません。 , 理由は不明です

electron-edge-js を使用すると、c# で開発された dll ファイルが読み込まれます。設定プロセスは少し面倒です。答えを探すのに 2 日かかりましたが、役に立ちませんでした。以下は解決策です。これには適切な薬が必要です。

c と c によって開発された dll # 別のローダーを使用します。c は ffi-napi を使用します。

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

構成がない場合、キャッチされません (約束された) エラー: モジュール '... \node_modules が見つかりません\electron\dist\resources\electron.asar\renderer\native\win32\x64\14.16.0\edge_nativeclr' このとき、vue.config.js ファイルに追加する必要があります。設定ファイルがない場合は、同じレベルで作成された package.json に追加する必要があります。

module.exports = {
    pluginOptions: {
        electronBuilder: {
            externals: ['electron-edge-js']
        }
    }
}

設定が有効になっていない場合、__dirname __filenameUncaught (in promise) ReferenceError: __dirname is not定義されているなど、nodejs の組み込み変数を使用することはできません。 to configure new BrowserWindow

{      
    // 如果使用到nodejs的api，则打包时需要将此设置为true
    nodeIntegration: true,
    // 同时，需要设置此项为false
    // 未设置时报 Uncaught ReferenceError: require is not defined
    contextIsolation: false  
}

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

module.exports = {
    pluginOptions: {
        electronBuilder: {
            externals: ['electron-edge-js'],
            // 此处同样需要开启，将会在编译阶段将引用关系写入
            nodeIntegration: true, 
        }
    }
}

この項目を別途設定しても、new BrowserWindowのnodeIntegration:trueが有効になっていない場合、Uncaught ReferenceError:require is not definedが発生します。

此外，对于dll放置的文件夹，一般在项目根目录创resources用于存放资源，并且项目打包过程中会不会直接打包资源目录，所以需要增加资源配置，以防止出错。对于文件的引用，在开发环境下，为当前所看到的结构，当编译打包后，为安装目录下resources目录，所以生产和开发的引用文件存在一定区别，可以实验后再看文件引用

 module.exports = {
     pluginOptions: {
         electronBuilder: {
             externals: ['electron-edge-js'],
             // 此处同样需要开启，将会在编译阶段将引用关系写入
             nodeIntegration: true, 
             builderOptions:{
                 extraResources: {
                     // 拷贝静态文件到指定位置，否则会提示文件找不到
                     from: 'resources/',
                     to: './'
                 },
             }
         }
     }
 }

提供文件获取目录方法，可以直接获取不同操作系统下app的resource目录，如果是window即 process.platform==='win32'

const path = require('path')
export function getAppResourcePath (filePath:string) {
    if (process.platform === 'darwin' || process.platform === 'linux') {
        if (process.env.NODE_ENV === 'development') {
            return path.resolve('resources/' + filePath)
        } else {
            return path.join(__dirname, '..') + filePath
        }
    } else {
        return path.resolve('resources/' + filePath)
    }
}

使用setup语法时，需使用require('electron-edge-js')引入，不可以使用import，否则会报 Syntax Error: TypeError: Cannot read property 'content' of null 而非 setup语法，则可以直接import

无边框窗口

系统本身是带有框架的，如果需要自定义框架，可以使用frameless 设置，如果需要使用自定义组件(比如 div.custom-frame-title)拖拽操作窗口时，需要给对应的元素增加样式:

 .custom-frame-title {
   -webkit-user-select: none; // 此项防止与文本选择冲突
   -webkit-app-region: drag; // 此项为系统相应状态栏
 }

前后台通知

import {ipcMain,ipcRenderer} from 'electron'

在electron中有很多可用api，其中最重要的是：ipcMain和ipcRenderer，用于ui进程和系统进程的通信。 在vue内使用ipcRenderer.on('eventname') 接受系统发来的消息，用ipcRenderer.send('eventname') 发送通知给系统，同样ipcMain可以在主线程使用。

ipc通常结合自定义标题栏完成以下操作，或者其他需要操作窗口本身的事件

win.minimize() //最小化窗口
win.maximize() //最大化窗口
win.close() //关闭窗口
win.hide() //隐藏窗口

以上がvue3+electron12+dll を使用してクライアント構成を開発する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。