通过electron-forge electronPackagerConfig

Question

使用electronic-forge构建桌面应用。该应用程序适用于OSX和视窗。在我的package.json中，我有：

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

当我在Windows上构建时，我不得不从＆＃34; app_icon_osx.icns＆＃34;手动更改package.json中的图标。到＆＃34; app_icon_win.ico＆＃34;。

如果我尝试使用＆＃34; app_icon.png＆＃34;对于这两个平台，该图标不会在OSX上显示，并且构建失败并且＆＃34; rcedit.exe失败，退出代码为1.致命错误：无法设置图标＆＃34;在Windows上。

我在项目的一个文件夹中有3个版本的图标（icns，ico，png）。因为我使用的是电子伪造，所以我似乎无法使用电子封装器 - 的论证。

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

Answer 1

为每个平台自动添加扩展程序。只需为每个平台提供一个图标：app_icon.icns，app_icon.ico，...

然后更新您的配置：

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

Answer 2

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

在制造商中设置应用程序图标（仅适用于应用程序列表）：

    {
      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" }])],
};

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

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

Answer 3

在 forge.config.js 中，执行：

const path = require('path')

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

重要说明：

1. If the file extension is omitted, it is auto-completed to the correct extension based on the platform, including when platform: 'all' is in effect.

2. 此设置在运行 electron-forge start 时不会更改图标。

3. 如果设置正确，您仍然没有看到正确的图标，您可能遇到了图标缓存问题。
   如果在 Windows 10 上，在命令行中运行 ie4uinit -show 将显示最新的图标。