使用electron-packager打包Mac应用时区分文件名与任务栏名称

我来帮你搞定这个需求！你想要打包后的.app文件名保留版本号（比如desktop_v2-1.0.0.app），但任务栏显示不带版本号的应用名称（desktop v2），核心是区分Mac应用的文件命名和系统显示名称：前者由electron-packager的打包名称参数控制，后者则由应用包内Info.plist的CFBundleDisplayName字段决定。下面给你几种实用方案：

方案一：直接修改打包命令指定显示名称 #

在你的package:osx脚本中，添加--osx-plist参数来覆盖Info.plist里的显示名称配置，同时保留原有的带版本号的文件名：

修改后的package:osx脚本如下：

"package:osx": "npm run build-prod && cross-var electron-packager $npm_package_name-$npm_package_version dist --platform=darwin --arch=x64 --overwrite --osx-plist='{\"CFBundleDisplayName\": \"desktop v2\"}'"

这里的--osx-plist='{"CFBundleDisplayName": "desktop v2"}'会直接修改生成的.app包内的Info.plist，让系统任务栏显示你指定的名称，而.app文件名依然保持desktop_v2-1.0.0.app不变。

方案二：复用package.json的productName配置 #

如果你不想硬编码显示名称，可以直接引用package.json里已有的productName变量，让配置更统一：

更新后的package:osx脚本：

"package:osx": "npm run build-prod && cross-var electron-packager $npm_package_name-$npm_package_version dist --platform=darwin --arch=x64 --overwrite --osx-plist='{\"CFBundleDisplayName\": \"'$npm_package_productName'\"}'"

这样只要你修改package.json里的productName，任务栏显示名称也会同步变化，不用再改打包命令。

方案三：在Electron主进程显式设置窗口标题 #

如果上面的plist配置没生效，还可以在Electron的主窗口代码里直接指定标题，这种方式更直接，不受plist影响：

打开你的Electron主进程文件（通常是main.js或index.js），在创建窗口时添加title参数：

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

function createMainWindow() {
  const mainWindow = new BrowserWindow({
    width: 1000,
    height: 700,
    title: 'desktop v2' // 这里设置任务栏显示的标题
  });

  mainWindow.loadFile('dist/index.html'); // 加载你的Angular打包后的页面
}

app.whenReady().then(() => {
  createMainWindow();
});

运行打包后的应用，任务栏就会显示你设置的标题了。

验证效果 #

打包完成后，你可以右键点击生成的.app文件 → 选择「显示包内容」→ 进入Contents文件夹打开Info.plist，查看CFBundleDisplayName字段是否为desktop v2（方案一/二）；或者直接运行应用，观察任务栏的显示效果（方案三）。

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