So entwickeln Sie eine Client-Konfiguration mit vue3+electron12+dll

Ändern Sie die Warehouse-Quelle

Aufgrund der Unbekanntheit der Elektronenversion kann es vorkommen, dass der Server verfügbar ist und nach dem Erstellen ein weißer Bildschirm geöffnet wird. Daher ist Vorsicht geboten. Es ist am besten, eine Version festzuschreiben, wenn sie verfügbar ist, um das Rollback des Codes zu erleichtern. Wenn jemand bessere Informationen hat, würde er diese gerne weitergeben.

Bevor Sie mit der Konfiguration beginnen, können Sie die RC-Dateien von Yarn und NPM leicht ändern. Verwenden Sie Befehle oder Dateien, um .npmrc oder .yarnrc direkt zu ändern. Diese beiden globalen Konfigurationsdateien befinden sich im Allgemeinen im Ordner C:user Ihres aktuellen Kontos. , oder erstellen Sie eine neue Dateibefehls-RC-Datei unter dem aktuellen Projekt, um die Konfiguration lokal zu ändern.
Da der Elektronen-Download aufgrund von Netzwerkproblemen fehlschlägt, wird er auf die Taobao-Quelle geändert, die Huawei-Quelle kann ebenfalls verwendet werden.

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/

Verwenden Sie im Installationsprozess vue create , um die vue3-Version auszuwählen. Geben Sie nach der Erstellung des Inhalts das Projektverzeichnis ein, fügen Sie vue Electron-Builder hinzu, um Electron zu konfigurieren, und wählen Sie die aktuelle Version 12 aus.

Startup

Der entsprechende Startbefehl wurde in package.json zusammengestellt.

• Verwenden Sie npm run Electron:Serve, um die Entwicklung zu starten Ersetzen Sie vue-devtools

• Src/background.ts unter dem Projekt project ist das Startverzeichnis von Electron. In der Entwicklungsumgebung treten die folgenden Situationen auf, in denen die Startwartezeit lang ist: Electron wird gestartet ...

  Die Erweiterung konnte nicht abgerufen werden, es wurde noch 4 Mal versucht

  Die Erweiterung konnte nicht abgerufen werden, es wurde noch 3 Mal versucht.
Die Erweiterung konnte nicht abgerufen werden, es wurde noch 2 Mal versucht.

Die Erweiterung konnte nicht abgerufen werden, es wurde noch 1 Mal versucht. Der Grund dafür ist, dass das Projekt verbunden werden muss Gehen Sie zum Google Store, um vue-devtools herunterzuladen und zu laden.

Ich habe viele Möglichkeiten zum Laden von Werkzeugen ausprobiert, aber alle sind fehlgeschlagen. Daher besteht die vorübergehende Lösung darin, Werkzeuge zu entfernen. Der Code wurde gefunden, entfernen Sie einfach 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()
})

Ich habe schon viele Methoden ausprobiert, aber es hat nicht funktioniert. Später habe ich das Folgende sorgfältig verglichen und einige Probleme festgestellt.

Die vue3-Version unterscheidet sich von der vue2-Version von vue-devtools, daher können die Entwicklungstools von vue2 nicht von vue3 verwendet werden. Daher müssen Sie die Entwicklungstools herunterladen, die vue3 entsprechen. Die neueste Version von vue2 ist 5.x, während die Version von vue3 die Betaversion 6.x ist. Diese Version des Plugins kann über crx4chrome heruntergeladen werden. Entpacken Sie den heruntergeladenen crx und kopieren Sie ihn dann in das Stammverzeichnis des Projekts. Ersetzen Sie den ursprünglichen Teil „await installExtension(VUEJS_DEVTOOLS)“ durch

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()
})

Nach dem Starten des Projekts können Sie die Vue-Erweiterung anzeigen. Für


(node:5904) ExtensionLoadWarning: Warnungen beim Laden der Erweiterung unter E:scanvue3_electronljjemllljcmogpfapbkkighbhhppjdbg-6.0.0-beta-13-Crx4Chrome.com: Unbekannter Manifestschlüssel „browser_action“.

Unbekannter Manifestschlüssel „update_url“.

Erlaubnis „ contextMenus“ ist unbekannt oder das URL-Muster ist fehlerhaft.

Erweiterung mit Datei- oder Verzeichnisnamen _metadata kann nicht geladen werden. Dateinamen, die mit „_“ beginnen, sind für die Verwendung durch das System reserviert.

(Verwenden Sie „electron --trace-warnings ...“) um anzuzeigen, wo die Warnung erstellt wurde)

Sie können sie ignorieren. Wenn Sie keine störenden Eingabeaufforderungen sehen möchten, können Sie den den Eingabeaufforderungen entsprechenden Inhalt in der Datei manifest.json der Tools löschen.

Hinweise: Die Syntax des Skript-Setups kann nicht verwendet werden Als Modul kann es in der Serve-Phase normal verwendet werden, aber nach dem Build wird die Komponente nicht geladen, die Seite ist leer und es wird kein Fehler gemeldet. Der Grund ist unbekannt

Verwenden von Electron-Edge-Js zum Laden Bei der von C# entwickelten DLL-Datei ist der Konfigurationsprozess etwas umständlich und es hat 2 Tage gedauert, die Antwort zu finden, aber alles ist fehlgeschlagen. Das Folgende ist die Lösung, Sie müssen die richtige Medizin einnehmen

Dlls, die in C++ und C# entwickelt wurden, verwenden unterschiedliche Loader und C++ verwendet ffi-napi.


Für die Verwendung von Edge ist das gleichzeitige Hinzufügen von drei Konfigurationen erforderlich.

Wenn nichts konfiguriert ist, wird der Fehler „Uncaught (in versprochen)“ angezeigt: Modul „...node_moduleselectrondistresourceselectron.asarrenderernativewin32x6414.16.0edge_nativeclr“ kann nicht gefunden werden muss sein Die Datei .config.js wird hinzugefügt. Wenn keine Konfigurationsdatei vorhanden ist, muss sie auf derselben Ebene wie package.json erstellt werden.

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

Wenn die Konfiguration nicht aktiviert ist, können Sie keine integrierten Nodejs-Variablen wie __dirname __filename verwenden.

Uncaught (im Versprechen) ReferenceError: __dirname ist nicht definiert. Zuerst müssen Sie ein neues BrowserWindow konfigurieren

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

Nach der obigen Konfiguration abgeschlossen, nicht abgefangen (in Versprechen) wird gemeldet) TypeError: fs.existsSync ist keine Funktion

Zu diesem Zeitpunkt müssen Sie weiterhin Konfigurationselemente von vue.config.js hinzufügen

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

Wenn Sie dieses Element separat konfigurieren, aber NodeIntegration nicht aktivieren: wahr für neues BrowserWindow, nicht erfasster Referenzfehler wird auftreten: Anforderung ist nicht definiert

此外，对于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() //隐藏窗口

Das obige ist der detaillierte Inhalt vonSo entwickeln Sie eine Client-Konfiguration mit vue3+electron12+dll. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!