Electron JS中自定义首个菜单名称被替换为Electron的问题求助

云原生阿岚

2026-8-22

Electron菜单首个label显示异常的原因及解决办法

原因

这是macOS系统下Electron的默认适配行为：macOS系统的应用菜单规范要求首个菜单显示应用名称，而非自定义的label。Electron会自动遵循这个系统规则，所以你看到首个菜单是默认应用名"Electron"，而第二个"View"菜单不受该规则影响，正常显示自定义内容。Windows和Linux系统则不会有这个问题，会直接显示你定义的"File"。

解决办法

1. 修改应用名称（替换默认的"Electron"）

如果你希望首个菜单显示你的应用名称而非"Electron"，可以通过两种方式修改：

在项目的package.json中修改name字段为你的应用名称；
在主进程代码中设置app.name：

const { app } = require('electron');
app.setName('你的应用名称');

2. 强制在macOS显示"File"菜单

如果确实需要首个菜单显示"File"，只需给对应的菜单项添加role: 'fileMenu'配置，Electron会自动适配macOS规范，此时首个菜单会显示"File"，同时系统级的文件相关菜单项会自动整合到这里：

const { Menu } = require('electron');

const menuTemplate = [
  {
    label: 'File',
    role: 'fileMenu', // 关键配置
    submenu: [
      { label: 'Open', click: () => {} },
      { type: 'separator' },
      { label: 'Quit', role: 'quit' }
    ]
  },
  {
    label: 'View',
    submenu: [
      { label: 'Reload', role: 'reload' }
    ]
  }
];

const appMenu = Menu.buildFromTemplate(menuTemplate);
Menu.setApplicationMenu(appMenu);