Detaillierter Code zum Hinzufügen von Electron zum Vue-Projekt

 "Haupt": "electron.js",

 "Paket": "electron-packager ./ appName --overwrite"

 "Elektronen-Share-Speicher": "^1.0.1",
   "node-gyp-build": "^4.3.0",
   "vue-photo-preview": "^1.1.3",

 "Elektron": "^15.3.1",
   "Elektronenpaketierer": "^15.4.0",

// öffnen: true, (Es wurde vorher nicht auskommentiert, kommentieren Sie es jetzt aus)

 '/api': {
        Ziel: „Electron-Renderer“ (nur dieser Ort wurde geändert, vorher war es das Ziel: „http://localhost“)
        changeOrigin: wahr,
        PfadNeu schreiben: {
          '^/api': ''
        }
      }

Vorschau aus „vue-photo-preview“ importieren
importiere „vue-photo-preview/dist/skin.css“
Vue.use (Vorschau)
// Elektronenfehler beheben process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'TRUE'

// Module zur Steuerung der Anwendungslebensdauer und zum Erstellen nativer Browserfenster
const {app, BrowserWindow} = require('electron')
const Pfad = require('Pfad')

Funktion Fenster erstellen () {
  // Browserfenster erstellen.
  const mainWindow = neues BrowserWindow({
    Breite: 1889,
    Höhe: 1000,
    Webeinstellungen: {
      vorladen: Pfad.beitreten(__dirname, 'preload.js')
    }
  })

  // und lade die index.html der App.
// Hauptfenster.loadFile('./dist/index.html')
  mainWindow.loadURL('http://172.16.1.155:7890/xjbd')

  // Öffnen Sie die DevTools.
  mainWindow.webContents.openDevTools()
}

// Diese Methode wird aufgerufen, wenn Electron fertig ist
// Initialisierung und ist bereit zum Erstellen von Browserfenstern.
// Einige APIs können erst verwendet werden, nachdem dieses Ereignis eintritt.
app.whenReady().then(() => {
  Fenster erstellen()

  app.on('aktivieren', Funktion () {
    // Unter macOS ist es üblich, ein Fenster in der App neu zu erstellen, wenn das
    // Auf das Dock-Symbol wird geklickt und es sind keine anderen Fenster geöffnet.
    wenn (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

// Beenden, wenn alle Fenster geschlossen sind, außer unter macOS. Dort ist es üblich
// damit Anwendungen und deren Menüleiste aktiv bleiben, bis der Benutzer sie beendet
// explizit mit Cmd + Q.
app.on('Fenster-alle-geschlossen', Funktion () {
  wenn (Prozess.Plattform !== 'darwin') app.quit()
})

// In diese Datei können Sie den Rest des spezifischen Hauptprozesses Ihrer App einbinden
// Code. Sie können sie auch in separate Dateien einfügen und hier anfordern.

// Alle Node.js-APIs sind im Vorladevorgang verfügbar.
// Es hat dieselbe Sandbox wie eine Chrome-Erweiterung.
window.addEventListener('DOMContentLoaded', () => {
  const replaceText = (Selektor, Text) => {
    const element = document.getElementById(Selektor)
    wenn (Element) Element.innerText = Text
  }

  für (const Typ von ['Chrom', 'Knoten', 'Elektron']) {
    replaceText(`${type}-version`, Prozess.Versionen[Typ])
  }
})