使用vue-cli-electron-builder时如何在Vue中点击按钮退出Electron应用

• 第一步：在主进程注册退出监听事件
  vue-cli-electron-builder默认的主进程入口文件为src/background.js，在该文件内添加ipc事件监听逻辑：

// src/background.js
import { app, ipcMain } from 'electron'

// 省略其他原有逻辑...

// 监听渲染进程发起的退出应用请求
ipcMain.on('app-exit', () => {
  app.quit()
})

• 第二步：配置预加载脚本并暴露通信接口
  首先修改项目根目录的vue.config.js，指定预加载脚本的路径：

// vue.config.js
module.exports = {
  // 其他原有配置...
  pluginOptions: {
    electronBuilder: {
      preload: 'src/preload.js'
    }
  }
}

新建src/preload.js文件，通过官方提供的上下文桥把触发退出的方法暴露给渲染进程：

// src/preload.js
import { contextBridge, ipcRenderer } from 'electron'

contextBridge.exposeInMainWorld('electronAPI', {
  exitApp: () => ipcRenderer.send('app-exit')
})

• 第三步：Vue页面绑定点击事件
  在需要添加退出按钮的Vue组件中，调用预加载脚本暴露的方法即可：

<template>
  <button @click="handleExit">退出应用</button>
</template>

<script>
export default {
  methods: {
    handleExit() {
      window.electronAPI.exitApp()
    }
  }
}
</script>

注意：不建议关闭Electron默认开启的上下文隔离配置直接在渲染进程引入Electron模块，会带来明显的安全风险，上述跨进程通信方案为Electron官方推荐的标准实现。

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