Electron-Packer verpackt das Frontend in eine Anwendung

Vor kurzem arbeite ich an einem anonymen Abstimmungssystem, das mit Vue entwickelt wurde. Ich möchte versuchen, Electron den Client zu paketieren. Nach

habe ich mich für die Verwendung von electron-builder zum Verpacken entschieden, da ich nach dem Ausprobieren festgestellt habe, dass die Dateigröße nach dem Verpacken von electron-packager größer war, während das Verpackungsvolumen von electron-builder relativ klein war unterstützte mehr Verpackungsformate, also entschied ich mich schließlich für electron-builder für die Verpackung.

Vorbereitung

Ich persönlich habe Electron nicht direkt mit dem Vue-Projekt verbunden, sondern es in das offizielle Schnellstartprojekt von Electron gepackt. Klicken Sie hier, um das Electron-Quick-Start-Warehouse anzuzeigen. Dieses Warehouse enthält Grundeinstellungen für die Verpackung, um Benutzern einen schnellen Einstieg zu erleichtern.

Die spezifischen Schritte können wie folgt zusammengefasst werden

1. InstallierenElectron-builder
2. Klonen des Schnellstart-Repositorysgit clone https://github.com/electron/electron-quick-start.git
3. Vue-Projekt packen
4. Kopieren Sie die gepackte Vue-Zieldatei in das ElectronSchnellstartprojekt
5. Fügen Sie personalisierte Konfiguration und Paket hinzu

Electron-Builder installieren

Um die zukünftige Verwendung zu erleichtern, habe ich die globale Installation hier direkt durchgeführt. Freunde können je nach tatsächlichem Bedarf verschiedene Installationsmethoden auswählen:

npm install electron-builder -g

Die Installationsoberfläche ist wie folgt unten gezeigt

Konfiguration hinzufügen

Meine Konfigurationsinformationen sind unten als Referenz beigefügt. Für spezifische Konfigurationsinformationen und Eigenschaften können Sie das Offizielle Dokument anzeigen

package.json

{  "name": "electron-quick-start",  "version": "1.0.0",  "author": "肖尊严",  "copyright": "Copyright © 2020 肖尊严",  "description": "基于同态加密算法的匿名投票系统",  "main": "main.js",  "scripts": {    "start": "electron .",    "build": "electron-builder --win --x64"  },  "build": {    "appId": "cn.beatree.anonvote",    "productName": "AnonVote 匿名投票系统",    "mac": {      "icon": "favicon.ico",      "target": ["dmg","zip"]    },    "win": {      "icon": "favicon.ico",      "target": ["nsis","zip", "portable"]    }  },  "repository": "https://github.com/electron/electron-quick-start",  "keywords": [    "Electron",    "quick",    "start",    "tutorial",    "demo"  ],  "author": "GitHub",  "license": "CC0-1.0",  "devDependencies": {    "electron": "^6.1.1"  },  "dependencies": {  }}

Führen Sie den Befehl zum Verpacken aus

npm run build

Führen Sie ihn einfach aus und die Zieldatei wird im dist-Verzeichnis generiert

Das obige ist der detaillierte Inhalt vonElectron-Packer verpackt das Frontend in eine Anwendung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!