Electron+Vue无框应用如何实现点击按钮关闭应用功能？

代码存在的问题 #

• Electron v10及以上版本默认禁用内置remote模块，同时渲染进程默认关闭nodeIntegration权限，你直接在Vue组件中调用require('electron')会抛出未捕获异常，直接导致渲染进程崩溃白屏
• 将Electron原生窗口实例存入Vue的响应式data中，Vue的递归响应式代理会修改窗口对象的内部属性，极易引发未知运行错误
• 目前官方已经废弃了Electron内置的remote模块，要使用需要单独安装@electron/remote依赖并做额外配置，不适合新手直接使用

推荐实现方案（IPC通信，官方推荐安全方案） #

该方案不需要开启渲染进程的Node权限，安全性更高，不会出现白屏问题

1. 主进程配置 #

首先在你的Electron主进程入口文件（通常是main.js或background.js）中做如下配置：

const { ipcMain, BrowserWindow, path } = require('electron')
let mainWindow = null

// 监听渲染进程发来的关闭窗口请求
ipcMain.on('window-close', () => {
  if (mainWindow) mainWindow.close()
})

// 创建主窗口的逻辑
function createWindow () {
  mainWindow = new BrowserWindow({
    frame: false, // 保留你的无框配置
    webPreferences: {
      nodeIntegration: false, // 不要开启Node集成，保证安全
      contextIsolation: true, // 保留默认开启的上下文隔离
      preload: path.join(__dirname, 'preload.js') // 填写你自己的预加载脚本实际路径
    }
  })
  // 你原来的窗口加载逻辑，比如loadURL之类的
}

2. 预加载脚本配置 #

创建preload.js文件，暴露IPC调用方法给渲染进程：

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

contextBridge.exposeInMainWorld('electronAPI', {
  closeWindow: () => ipcRenderer.send('window-close')
})

3. Vue组件调用 #

修改你的home.vue代码如下即可：

<script>
export default {
  methods: {
    close() {
      window.electronAPI.closeWindow()
    }
  }
}
</script>

备选方案（使用@electron/remote，不推荐） #

如果你一定要用和原代码类似的写法，需要做如下修改：

1. 安装依赖：npm install @electron/remote
2. 主进程中初始化并启用remote：

const remoteMain = require('@electron/remote/main')
remoteMain.initialize()
// 创建窗口后调用
remoteMain.enable(mainWindow.webContents)

3. 创建窗口时开启对应权限：

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

4. 修改Vue组件代码，不要将窗口实例存入响应式data：

<script>
const { getCurrentWindow } = require('@electron/remote')
export default {
  methods: {
    close() {
      getCurrentWindow().close()
    }
  }
}
</script>

内容的提问来源于stack exchange，提问作者noobcode0000