electron-vue创建新窗口，以及打开窗口空白的解决办法

2024年2月17日 193次阅读 来源: 一抹清风似少年

    vue文件内 绑定创建 新建窗口 的 事件

 @click="openNewWindow" // 元素上绑定

    使用ipcRenderer 通知主进程 创建新窗口，新窗口创建 请使用 主进程创建，不要在vue文件内创建。利于主进程对窗口的控制。

import { ipcRenderer } from 'electron'
openNewWindow(){
    ipcRenderer.send('newwindow')
},

  

    ipcMain 添加 新建窗口事件。请在 createWindow函数外，定义newWin变量。用于判断窗口是否已存在，存在则聚焦。
    窗口设置 请查看官方文档 中 BrowserWindow 的介绍。
    loadURL(winURL + “#/路由地址”)

注意：如果你vue的router没有关闭histrory也就是地址都带个“/#”比如“locolhost:8080/#main”

这里需要写成oadURL(winURL + “/#main”)

注意#加了跟没加处理不好会导致打开的窗口空白

const winURL = process.env.NODE_ENV === 'development'
  ? `http://localhost:9080`
  : `file://${__dirname}/index.html`
// http://localhost:9080 可根据自己项目运行端口配置

// createWindow 函数中
    ipcMain.on('newwindow',function(){
    if(newWin){
      newWin.focus() // 存在 则聚焦
      return
    }
    newWin = new BrowserWindow({
      width:900,
      height:620,
      minWidth:900,
      minHeight:620,
      frame:true,//是否显示边缘框
      fullscreen:false, //是否全屏显示
      title:"项目名",
      autoHideMenuBar:true
    })
    newWin.loadURL(winURL+'#/路由地址')  // 此处写 你要打开的路由地址
    newWin.on('close',()=>{
      newWin=null
    })
  })

 

    主进程 窗口关闭时，请把子窗口也关闭。

ipcMain.on('window-close',function (){
    mainWindow.close();
    if(newWin){
      newWin.close();
    }
  })

    原文作者：一抹清风似少年
    原文地址: https://blog.csdn.net/qq_30815659/article/details/123558758
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞