You need to enable JavaScript to run this app. Vue+Electron项目窗口无法显示,ready-to-show事件未触发如何解决?
优惠活动
大模型
产品
解决方案
定价
更多

Vue+Electron项目窗口无法显示,ready-to-show事件未触发如何解决?

问题原因

ready-to-show事件未触发的核心原因是事件监听器注册时机晚于事件实际触发时间:
你的代码中先执行了await win.loadURL()加载页面,等页面加载完成后才绑定ready-to-show事件监听器,此时该事件已经触发完毕,自然无法响应。

修复步骤
  1. 调整windowManager.js中事件绑定的位置,将ready-to-show、closed事件的绑定代码,移到new BrowserWindow之后、loadURL调用之前
  2. 删除多余的手动show调用:
    • 删掉windowManager.js中//TODO Check if this line is necessary下方的win.show()
    • 删掉background.js中activate、ready事件里createHomeWindow调用后的winHome.show()
  3. 优化主窗口最大化逻辑(可选,避免窗口闪烁):将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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.10.17 17:36:01