electron vue 实现自定义关闭electron窗口按钮

最近做了一个electron客户端开发，是基于vue来做得，有个需求是自定义关闭electron客户端的按钮。比较简单，记录一下。

网上有两种方法，一种是用remote，一种是使用ipc。我使用的是ipc。

electron已经提供了win.close()关闭功能，我们只需要在渲染进程中将命令传给主进程就好了。

首先在渲染进程中加入如下：

const electron = window.require("electron");
Vue.prototype.$electron = electron;

此段代码是加在vue的main.js中，一定要是window.require引入。之前尝试在vue组件中通过import引入electron和直接require引入，都一直报错：

fs.existsSync is not a function

接下来在vue组件中加入点击事件：

closeWin () {
     this.$electron.ipcRenderer.send('window-close')
}

最后在主进程中加入下列代码：

const { ipcMain } = require('electron')
ipcMain.on('window-close',function (){
	win.close();
 })

最后直接运行electron .即可查看效果。

如果此时报下列错误：

Uncaught TypeError: window.require is not a function 

在主进程中加入这两行代码即可：

win = new BrowserWindow({
    ...
    webPreferences: {
      ...
	  nodeIntegration: true, 
	  contextIsolation: false,
    },
  })