Vue3 + Electron 创建新的子窗口 且子窗口唯一

main.js

const { app, BrowserWindow, ipcMain } = require('electron')
...

ipcMain.on('window-create', () => {
  createChildWindow()
})

let childWindow = null

const createChildWindow = () => {
  // 如果窗口存在 先销毁
  if (childWindow) {
    childWindow.destroy()
    childWindow = null
  }
  childWindow = new BrowserWindow({
    width: 1200, // 窗口宽度
    height: 600, // 窗口高度
    useContentSize: true,
    resizable: false, //窗口宽高禁止拉动
    frame: false, // 隐藏窗口边框和标题栏
    webPreferences: {
      nodeIntegration: true, //在网页中集成Node
      contextIsolation: false
    }
  })

  childWindow.loadURL('https://www.baidu.com')
}

preload.js

const { contextBridge, ipcRenderer } = require('electron')

contextBridge.exposeInMainWorld('electronAPI', {
  create: () => ipcRenderer.send('window-create') // 创建窗口
})

vue页面

<template>
  <div @click="create">创建窗口</div>
</template>

<script lang="ts" setup>

const create = () => {
  window.electronAPI.create()
}

</script>

<style lang="less" scoped></style>