electron - 通过 electron-forge electronPackagerConfig 设置平台相关图标

Question

使用 electron-forge 构建桌面应用程序。该应用程序是为 OSX 和 Windows 构建的。在我的 package.json 中，我有：

"electronPackagerConfig": {
    "icon": "src/images/icon/app_icon_osx.icns"
}

当我在 Windows 上构建时，我必须手动将 package.json 中的图标从“app_icon_osx.icns”更改为“app_icon_win.ico”。

如果我尝试对两个平台都使用“app_icon.png”，则该图标不会显示在 OSX 上，并且构建失败并出现“rcedit.exe failed with exit code 1. Fatal error: Unable to set icon”在 Windows 上。

我在项目的一个文件夹中拥有所有 3 个版本的图标（icns、ico、png）。因为我使用的是电子锻造，我似乎无法使用电子打包器的 --icon 参数。

有没有办法可以传递图标以用作命令行参数，而不是在 package.json 中硬编码？或者我可以在两个平台上使用相同的 png 的方法？

score 10 · Accepted Answer

为每个平台自动添加扩展。只需为每个平台提供一个图标，如下所示：app_icon.icns, app_icon.ico, ...

然后更新你的配置：

"electronPackagerConfig": {
    "icon": "src/images/icon/app_icon"
}

score 3 · Accepted Answer

接受的答案适用于 macOS 和 Windows，但对于 Linux，您必须执行以下操作：

在 maker 中设置应用图标（仅适用于应用列表）：

    {
      name: "@electron-forge/maker-deb",
      config: {
        options: {
          icon: "./src/images/icon.png",
        },
      },
    },

在构建过程中创建一个资产文件夹（或任何东西）并将其复制到copy-webpack-plugin您的webpack.main.config.js：

const CopyPlugin = require("copy-webpack-plugin");

module.exports = {
  // ...
  plugins: [new CopyPlugin([{ from: "./assets", to: "assets" }])],
};

您现在可以从主进程访问此文件夹中的任何文件，因此请在创建时参考该图标，如此BrowserWindow处所述

mainWindow = new BrowserWindow({
    // ...
    icon: path.join(__dirname, "assets/icon.png"),
  });

score 0 · Accepted Answer

在forge.config.js中，执行：

const path = require('path')

module.exports = {
  packagerConfig: {
    icon: path.join(__dirname, 'favicon'),
  },
}

重要笔记：

如果省略文件扩展名，则会根据平台自动补全为正确的扩展名，包括当 platform: 'all' 生效时。
此设置在运行时不会更改图标electron-forge start。
如果设置正确，但您仍然看不到正确的图标，您可能遇到了图标缓存问题。
如果在 Windows 10 上，ie4uinit -show在命令行中运行将显示最新的图标。

3 回答 3