Electron打包的桌面应用macOS 系统左上角菜单栏中的应用名称设置

要设置 macOS 系统左上角菜单栏中的应用名称，你需要在 Electron 应用的配置中进行设置。具体来说，可以通过 electron-builder 的配置来实现。以下是详细的步骤：

1. 更新 Info.plist 文件

在 macOS 上，应用的菜单栏名称是由 Info.plist 文件中的 CFBundleName 字段决定的。你可以在打包时通过 electron-builder 来设置这个字段。

2. 配置 electron-builder

确保你使用的是 electron-builder 进行打包，并在 package.json 文件中进行相应的配置。

{
  "name": "my-vue-electron-app",
  "version": "1.0.0",
  "description": "My Vue.js and Electron app",
  "main": "main.js",
  "build": {
    "productName": "MyVueElectronApp", // 设置应用的产品名称，这个会影响应用的显示名称
    "appId": "com.example.myvueelectronapp",
    "mac": {
      "category": "public.app-category.utilities",
      "target": [
        "dmg",
        "zip"
      ],
      "extendInfo": {
        "CFBundleName": "MyVueElectronApp", // 设置macOS菜单栏应用名称
        "CFBundleDisplayName": "MyVueElectronApp"
      }
    }
  }
}

3. 确保 main.js 文件中没有覆盖 app.setName

在你的 main.js 文件中，不要覆盖 app.setName，由于 electron-builder 已经在打包时处理了这个配置。

const { app, BrowserWindow } = require('electron');

function createWindow () {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    },
    title: "My Vue Electron App"
  });

  mainWindow.loadURL('https://localhost:8080'); // 或者是加载打包后的文件
}

app.on('ready', createWindow);

4. 重新打包应用

在配置完成后，重新打包你的 Electron 应用：

npm run electron:build

5. 检查打包结果

打包完成后，打开打包好的应用，检查 macOS 左上角菜单栏中的应用名称是否已经更新为你设置的名称。

总结

通过在 electron-builder 配置中设置 CFBundleName 和 CFBundleDisplayName，你可以更改 macOS 系统菜单栏中的应用名称。确保在 package.json 中正确配置 build 字段，并重新打包应用，以应用这些更改。这样，你的应用在 macOS 系统菜单栏中就会显示你期望的名称了。