Detaillierte Erläuterung der Clientkonfiguration für die Entwicklung von vue3 + electron12 + dll

Die aktuell verwendete Version ist vue3.0 + Typescript + Electron 12, erstellt von @vue/cli4. Andere Versionen wurden noch nicht getestet. Die Qualität der Informationen im Internet ist unterschiedlich, daher habe ich einige Zeit damit verbracht, nacheinander zu experimentieren, um die jeweils beste Lösung zu finden.

Ändern der Repository-Quelle

Aufgrund der unbekannten Natur der Electron-Version ist es möglich, dass der Server verfügbar ist, nach dem Erstellen jedoch ein weißer Bildschirm angezeigt wird. Sie müssen also vorsichtig sein. Es ist am besten, eine Version erst dann zu committen, wenn sie verfügbar ist, um das Zurücksetzen des Codes zu erleichtern. Wenn jemand bessere Informationen hat, teilen Sie sie uns bitte mit.

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:\Benutzer\Ihr aktuelles Konto. Oder erstellen Sie im aktuellen Projekt eine neue Datei mit dem Befehl rc, um die Konfiguration lokal zu ändern.
Da Electron-Downloads aufgrund von Netzwerkproblemen fehlschlagen können, wechseln wir zur Taobao-Quelle oder Huawei-Quelle.

npm-Konfigurationsregistrierung festlegen http://registry.npm.taobao.org/
npm set config chromedriver_cdnurl http://registry.npm.taobao.org/chromedriver
npm setze Konfiguration Electron_Mirror http://registry.npm.taobao.org/electron/
npm setze Konfiguration electron_builder_binaries_mirror http://registry.npm.taobao.org/electron-builder-binaries/

Verwenden Sie während des Installationsvorgangs vue create <Ihr Projektname>, um die Version vue3 auszuwählen. Nachdem der Inhalt erstellt wurde, geben Sie das Projektverzeichnis ein, hängen Sie vue electron-builder an, um electron zu konfigurieren, und wählen Sie die aktuelle Version 12 aus.

Start-up

Der entsprechende Startbefehl wurde in package.json zusammengestellt.

• Verwenden Sie npm run electron:serve, um die Entwicklung zu starten
• npm run electron:build kompilieren und verpacken Produktion

Ersetzen Sie vue-devtools

Unter dem Projekt ist src/background.ts das Startverzeichnis von Electron. In der Entwicklungsumgebung treten die folgenden Situationen mit einer langen Startwartezeit auf:

Starten von Electron...
Erweiterung konnte nicht abgerufen werden. Weitere 4 Versuche
Erweiterung konnte nicht abgerufen werden. Versuche noch 3 Mal
Erweiterung konnte nicht abgerufen werden. Versuche es noch 2 Mal.
Erweiterung konnte nicht abgerufen werden. Versuche es noch 1 Mal.

Dies liegt daran, dass das Projekt eine Verbindung zum Google Store herstellen muss, um vue-devtools herunterzuladen und zu laden, was fehlgeschlagen ist.

Ich habe viele Möglichkeiten zum Laden der Tools ausprobiert, aber alle sind fehlgeschlagen. Die vorübergehende Lösung besteht daher darin, die Tools zu entfernen. Der Code wurde gefunden, entfernen Sie einfach installExtension

app.on('bereit', async () => {
  wenn (isDevelopment && !process.env.IS_TEST) {
    // Vue Devtools installieren
    versuchen {
    // warte auf installExtension(VUEJS_DEVTOOLS)
    } fangen (e) {
      console.error('Vue Devtools konnte nicht installiert werden:', e.toString())
    }
  }
  Fenster erstellen()
})

Ich habe schon viele Methoden ausprobiert, aber ohne Erfolg. Später, nach sorgfältigem Vergleich, stellte ich einige Probleme fest.

Die Vue-Devtools von Vue3 und Vue2 sind unterschiedlich, sodass die Devtools von Vue2 nicht für Vue3 verwendet werden können. Daher müssen Sie die entsprechenden Entwicklungstools von Vue3 herunterladen. Die neueste Version von vue2 ist 5.x, während die neueste Version von vue3 die Betaversion 6.x ist. Diese Version des Plugins kann über crx4chrome heruntergeladen werden. Entpacken Sie die heruntergeladene CRX-Datei, kopieren Sie sie in das Stammverzeichnis des Projekts und ersetzen Sie die ursprüngliche await installExtension(VUEJS_DEVTOOLS) durch

importiere {session} von 'electron'

app.on('bereit', async () => {
  wenn (isDevelopment && !process.env.IS_TEST) {
    // Vue Devtools installieren
    versuchen {
    const vue_devtools = "ljjemllljcmogpfapbkkighbhhppjdbg-6.0.0-beta-13-Crx4Chrome.com"
    warte auf session.defaultSession.loadExtension(path.resolve(vue_devtools))
    } fangen (e) {
      console.error('Vue Devtools konnte nicht installiert werden:', e.toString())
    }
  }
  Fenster erstellen()
})

Nach dem Start des Projekts können Sie die Erweiterung von Vue anzeigen. für

(Knoten:5904) ExtensionLoadWarning: Warnungen beim Laden der Erweiterung unter E:\scan\vue3_electron\ljjemllljcmogpfapbkkighbhhppjdbg-6.0.0-beta-13-Crx4Chrome.com:
Unbekannter Manifestschlüssel „browser_action“.
Unbekannter Manifestschlüssel „update_url“.
Die Berechtigung „contextMenus“ ist unbekannt oder das URL-Muster ist falsch.
Die Erweiterung mit dem 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.)

Kann ignoriert werden. Wenn Sie keine störenden Eingabeaufforderungen sehen möchten, können Sie den entsprechenden Inhalt im manifest.json der Tools löschen

Vorsichtsmaßnahmen

Die <script setup>-Syntax kann nicht verwendet werden

Wenn Sie script-setup als Modul verwenden, funktioniert es in der Bereitstellungsphase einwandfrei, aber nach dem Erstellen wird die Komponente nicht geladen, die Seite ist leer und es wird kein Fehler gemeldet. Der Grund ist unbekannt

Verwenden Sie electron-edge-js, um die in C# entwickelte DLL-Datei zu laden. Der Konfigurationsprozess ist etwas umständlich. Ich habe 2 Tage lang nach einer Lösung gesucht, aber ohne Erfolg. Das Folgende ist die Lösung. Sie müssen das richtige Medikament verschreiben.

In C++ und C# entwickelte DLLs verwenden unterschiedliche Loader und C++ verwendet FFI-NAPI.

Bei der Verwendung von Edge müssen drei Konfigurationen gleichzeitig hinzugefügt werden

Wenn nichts konfiguriert ist, tritt der Fehler „Uncaught (in promise) Error: Cannot find module '...\node_modules\electron\dist\resources\electron.asar\renderer\native\win32\x64\14.16.0\edge_nativeclr'“ auf. Zu diesem Zeitpunkt müssen Sie es zur Datei vue.config.js hinzufügen. Wenn keine Konfigurationsdatei vorhanden ist, müssen Sie sie auf derselben Ebene wie package.json erstellen.

modul.exporte = {
    Plugin-Optionen: {
        ElektronenBuilder: {
            Äußerlichkeiten: ['electron-edge-js']
        }
    }
}

Wenn die Konfiguration nicht aktiviert ist, können in nodejs integrierte Variablen wie __dirname __filename nicht verwendet werden
Nicht abgefangen (im Promise) ReferenceError: __dirname ist nicht definiert Zuerst müssen Sie das neue Browserfenster konfigurieren

{      
    // Wenn Sie die NodeJS-API verwenden, müssen Sie dies beim Verpacken auf „true“ setzen
    nodeIntegration: wahr,
    // Gleichzeitig müssen Sie dies auf false setzen
    // Wenn nicht festgelegt, melden Sie „Uncaught ReferenceError“: „require“ ist nicht definiert.
    KontextIsolation: false  
}

Nachdem die obige Konfiguration abgeschlossen ist, wird Uncaught (in promise) TypeError: fs.existsSync is not a function gemeldet.
An diesem Punkt müssen Sie weitere Konfigurationselemente zu vue.config.js hinzufügen.

modul.exporte = {
    Plugin-Optionen: {
        ElektronenBuilder: {
            Äußerlichkeiten: ['electron-edge-js'],
            // Dies muss ebenfalls aktiviert werden, und die Referenzbeziehung wird während der Kompilierungsphase in nodeIntegration: true geschrieben. 
        }
    }
}

Wenn Sie nur diese Option konfigurieren, aber „nodeIntegration: true“ für das neue Browserfenster nicht aktivieren, tritt „Uncaught ReferenceError: require is not defined“ auf.

Darüber hinaus werden für den Ordner, in dem die DLL abgelegt ist, Ressourcen im Allgemeinen im Stammverzeichnis des Projekts erstellt, um Ressourcen zu speichern. Das Ressourcenverzeichnis wird während des Projektpaketierungsprozesses nicht direkt gepackt. Daher muss die Ressourcenkonfiguration erhöht werden, um Fehler zu vermeiden. Bei Dateiverweisen ist die Struktur in der Entwicklungsumgebung die, die Sie aktuell sehen. Nach der Kompilierung und Verpackung ist es das Ressourcenverzeichnis unter dem Installationsverzeichnis. Daher gibt es einige Unterschiede zwischen den Referenzdateien in Produktion und Entwicklung. Sie können sich die Dateiverweise nach dem Experiment ansehen.

 modul.exporte = {
     Plugin-Optionen: {
         ElektronenBuilder: {
             Äußerlichkeiten: ['electron-edge-js'],
             // Dies muss ebenfalls aktiviert werden, und die Referenzbeziehung wird während der Kompilierungsphase in nodeIntegration: true geschrieben. 
             BuilderOptionen:{
                 zusätzliche Ressourcen: {
                     // Kopieren Sie die statische Datei an den angegebenen Speicherort. Andernfalls wird eine Meldung angezeigt, dass die Datei unter „resources/“ nicht gefunden werden kann.
                     Zu: './'
                 },
             }
         }
     }
 }

Bietet eine Methode für den Dateizugriff auf Verzeichnisse, mit der das Ressourcenverzeichnis der App unter verschiedenen Betriebssystemen direkt abgerufen werden kann. Wenn es sich um Windows handelt, ist process.platform==='win32'

const Pfad = require('Pfad')
Exportfunktion getAppResourcePath (Dateipfad: Zeichenfolge) {
    wenn (Prozess.Plattform === 'darwin' || Prozess.Plattform === 'linux') {
        wenn (Prozess.env.NODE_ENV === 'Entwicklung') {
            returniere Pfad.löse('resources/' + filePath)
        } anders {
            return path.join(__dirname, '..') + Dateipfad
        }
    } anders {
        returniere Pfad.löse('resources/' + filePath)
    }
}

Wenn Sie die Setup-Syntax verwenden, müssen Sie require('electron-edge-js') verwenden, um sie einzuführen. Sie können keinen Import verwenden, da Sie sonst einen Syntaxfehler melden: TypeError: Eigenschaft „content“ von null kann nicht gelesen werden, anstatt Setup-Syntax. Sie können direkt importieren.

Randloses Fenster

Das System selbst verfügt über einen Rahmen. Wenn Sie den Rahmen anpassen müssen, können Sie die rahmenlose Einstellung verwenden. Wenn Sie zum Ziehen des Operationsfensters eine benutzerdefinierte Komponente (z. B. div.custom-frame-title) verwenden müssen, müssen Sie den entsprechenden Elementen Stile hinzufügen:

 .benutzerdefinierter Rahmentitel {
   -webkit-user-select: none; // Dieses Element verhindert Konflikte bei der Textauswahl -webkit-app-region: drag; // Dieses Element ist die systemspezifische Statusleiste}

Front- und Backend-Benachrichtigungen

importiere {ipcMain,ipcRenderer} von 'electron'

In Electron sind viele APIs verfügbar, die wichtigsten davon sind: ipcMain und ipcRenderer, die für die Kommunikation zwischen dem UI-Prozess und dem Systemprozess verwendet werden. Verwenden Sie in Vue ipcRenderer.on('eventname'), um Nachrichten vom System zu empfangen, und verwenden Sie ipcRenderer.send('eventname'), um Benachrichtigungen an das System zu senden. Ebenso kann ipcMain im Hauptthread verwendet werden.

ipc führt normalerweise die folgenden Vorgänge in Verbindung mit einer benutzerdefinierten Titelleiste oder anderen Ereignissen aus, die eine Bedienung des Fensters selbst erfordern

win.minimize() //Fenster minimieren win.maximize() //Fenster maximieren win.close() //Fenster schließen win.hide() //Fenster ausblenden

Abschließende Gedanken

Die anderen Methoden unterscheiden sich nicht von der herkömmlichen Vue-Entwicklung. Für die Interaktion zwischen dem System und der Benutzeroberfläche müssen Sie weitere API-Dokumente lesen.

Dies ist das Ende dieses Artikels über die detaillierte Konfiguration der vue3+electron12+dll-Cliententwicklung. Weitere relevante Inhalte zur vue3+electron12+dll-Clientkonfiguration finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die verwandten Artikel weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!