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
Der entsprechende Startbefehl wurde in package.json zusammengestellt.
Verwenden Sie npm run Electron:Serve, um die Entwicklung zu starten Ersetzen Sie vue-devtools
Die Erweiterung konnte nicht abgerufen werden, es wurde noch 4 Mal versucht
Die Erweiterung konnte nicht abgerufen werden, es wurde noch 3 Mal versucht.
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)“ durchUnbekannter Manifestschlüssel „update_url“.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 Login kopieren
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“.
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 unbekanntVerwenden 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']
}
}
}{
// 如果使用到nodejs的api，则打包时需要将此设置为true
nodeIntegration: true,
// 同时，需要设置此项为false
// 未设置时报 Uncaught ReferenceError: require is not defined
contextIsolation: false
}Zu diesem Zeitpunkt müssen Sie weiterhin Konfigurationselemente von vue.config.js hinzufügenWenn Sie dieses Element separat konfigurieren, aber NodeIntegration nicht aktivieren: wahr für neues BrowserWindow, nicht erfasster Referenzfehler wird auftreten: Anforderung ist nicht definiertmodule.exports = { pluginOptions: { electronBuilder: { externals: ['electron-edge-js'], // 此处同样需要开启，将会在编译阶段将引用关系写入 nodeIntegration: true, } } }Nach dem Login kopieren
此外，对于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!
Der Unterschied zwischen vue2.0 und 3.0
So lösen Sie das Problem, dass die DLL nicht geladen werden kann
Was tun, wenn das Laden der DLL fehlschlägt?
Was sind die Lebenszyklen von vue3?
Wie lautet die Aufschrift brc20
So verwenden Sie insertBefore in Javascript
Flex-Tutorial
Warum kann Swoole im Speicher verbleiben?
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
