Electron菜单项点击事件无法触发，是怎么回事？

爱学习的丽红提问于 2026-02-05 22:44:31 阅读 33

框架

我在用Electron+Vue做桌面应用时遇到了问题，给菜单项绑定了点击事件但完全没反应。之前按照文档在main.js里用Menu.setApplicationMenu注册了菜单模板，然后在渲染进程里通过ipcRenderer监听事件，但点击菜单项完全没响应。

代码是这样的：


// main.js
const template = [
  {
    label: '测试菜单',
    click() {
      require('electron').ipcMain.emit('test-event');
    }
  }
];
Menu.setApplicationMenu(Menu.buildFromTemplate(template));

在Vue组件里这样监听：


// MyComponent.vue
mounted() {
  window.ipcRenderer.on('test-event', () => {
    console.log('事件被触发了');
  });
}

控制台没有任何报错，但点击菜单项就是没反应。折腾了好久没头绪，求大神指教哪里出问题了？

我来解答赞 6 收藏

反馈

1 条解答

W″啸垄 Lv1

你这代码写反了。Electron菜单项的 click 回调里应该用 ipcRenderer 而不是 ipcMain。main.js 里 require('electron') 拿到的是 remote 模块，但你直接 emit('test-event') 是往 ipcMain 上发事件，而渲染进程监听的是 ipcRenderer。这事件根本没传到渲染进程。

正确写法是：

// main.js
const { remote } = require('electron');
const template = [
{
label: '测试菜单',
click() {
remote.ipcRenderer.emit('test-event');
}
}
];
Menu.setApplicationMenu(Menu.buildFromTemplate(template));

这样点击菜单项才会把事件通过 remote 代理到渲染进程的 ipcRenderer 上。不过更推荐用 ipcRenderer.send + ipcMain.on 这种主进程转发的方式，而不是直接用 remote.emit，否则容易搞混。

另外 Vue 组件里监听事件写法是对的，但建议加个错误处理：

// MyComponent.vue
mounted() {
window.ipcRenderer.on('test-event', () => {
console.log('事件被触发了');
}).on('error', (err) => {
console.error('ipcRenderer error:', err);
});
}

2026-02-05 23:06