1.首先在background.js中利用ipcMain创建，首先引用

import { app, BrowserWindow, ipcMain } from 'electron'

2.在background.js里创建一个function

let newWindow  //在顶部定义一个变量

const winURL = process.env.NODE_ENV === 'development'
  ? `http://localhost:8080` // 开发路径
  : `file://${__dirname}/index.html` //生产路径

function jiuCuo() {    //在下面定义一个函数
  ipcMain.on('create-new-window', () => {  //'create-new-window'随便命名，用于打开窗口
    if (newWindow) {
      newWindow.focus() // 存在 则聚焦
      return
    }
    newWindow = new BrowserWindow({
      width: 1107, //窗口宽高
      height: 603,
      title: '交换机路由器脚本自动配置工具-纠错',
      closable: true,
      resizable: false,//禁止窗口随意拉伸
      webPreferences: {
        nodeIntegration: true,
        contextIsolation: false,
        enableRemoteModule: true,
      }
    })
    newWindow.loadURL(winURL + '#/about')
    newWindow.on('closed', () => {
      newWindow = null
    })
  })
}


app.on('ready', async () => {    //这个监听是background.js自带的
  if (isDevelopment && !process.env.IS_TEST) {
    // Install Vue Devtools
    try {
      await installExtension(VUEJS3_DEVTOOLS)
    } catch (e) {
      console.error('Vue Devtools failed to install:', e.toString())
    }
  }
  createWindow()
  jiuCuo()   //在此处调用
  
})

注意：create-new-window用于渲染进程（就是前端代码）用来发送这个字段，触发create-new-window窗口。

3.在渲染进程里，background.js是主进程，引用ipcRenderer

第一种引入方式：import { ipcRenderer} from 'electron';


第一种方式有时会报错。

第二种引入方式：const { ipcRenderer } = require("electron");

使用第二种方式报错的话就需要在vue.config里配置


在methods里定义一个点击事件
methods:{
   clickd(){

   ipcRenderer.send('create-new-window')


   }


}

//vue.config



const { defineConfig } = require("@vue/cli-service");

module.exports = defineConfig({
 
  transpileDependencies: true,
  lintOnSave: false,
  pluginOptions: {
    electronBuilder: {
      nodeIntegration: true,   //用于打开允许node模块使用
      customFileProtocol: "./", //用于解决打包后背景图不显示
    },
  },

});

background.js接收到后窗口就出现了。