Vue+Electron项目窗口无法显示,ready-to-show事件未触发如何解决?
问题原因
ready-to-show事件未触发的核心原因是事件监听器注册时机晚于事件实际触发时间:
你的代码中先执行了await win.loadURL()加载页面,等页面加载完成后才绑定ready-to-show事件监听器,此时该事件已经触发完毕,自然无法响应。
修复步骤
- 调整
windowManager.js中事件绑定的位置,将ready-to-show、closed事件的绑定代码,移到new BrowserWindow之后、loadURL调用之前 - 删除多余的手动
show调用:- 删掉
windowManager.js中//TODO Check if this line is necessary下方的win.show() - 删掉
background.js中activate、ready事件里createHomeWindow调用后的winHome.show()
- 删掉
- 优化主窗口最大化逻辑(可选,避免窗口闪烁):将
createMainWindow中的win.maximize()移到ready-to-show回调中执行
修正后的核心代码片段
// windowManager.js 修正后的createWindow方法 async createWindow(sizeProperties, settings, router = null) { let win; // 创建浏览器窗口 win = new BrowserWindow({ ...sizeProperties, ...settings, webPreferences: { nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION, contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION, preload: path.join(__dirname, "preload.js"), }, }); // 提前绑定事件,放在loadURL之前 win.once("ready-to-show", () => { win.show(); // 主窗口在这里执行最大化 if (router === 'main') { win.maximize(); } }); win.on("closed", () => { win.destroy(); }); router = router ? `/#/${router}` : ""; try { if (process.env.WEBPACK_DEV_SERVER_URL) { await win.loadURL(`${process.env.WEBPACK_DEV_SERVER_URL}${router}`); if (!process.env.IS_TEST) win.webContents.openDevTools(); } else { createProtocol("app"); await win.loadURL(`app://./index.html${router}`); } } catch (error) { console.error(error); } return win; } // createMainWindow方法移除多余的maximize调用 async createMainWindow() { return await this.createWindow( { width: 800, height: 550, }, { frame: false, show: false, }, "main" ); }
// background.js 修正后的事件回调 app.on("activate", async () => { if (BrowserWindow.getAllWindows().length === 0) { winHome = await windowManager.createHomeWindow(); } }); app.on("ready", async () => { if (isDevelopment && !process.env.IS_TEST) { try { await installExtension(VUEJS_DEVTOOLS); } catch (e) { console.error("Vue Devtools failed to install:", e.toString()); } } winHome = await windowManager.createHomeWindow(); });
内容的提问来源于stack exchange,提问作者Lucas Guimaraes
相关产品推荐
相关产品推荐

