无法使用 Electron Builder 将图标添加到 Electron App

Can't Add Icon To Electron App With Electron Builder

我用 Electron 制作了一个应用程序,我正在尝试用 Electron Builder 打包它。

Link to repository

不包含 node_modules 文件夹:Repo here

我有一个名为 build 的文件夹,里面有我的 icon.ico,我的 package.json 如下:

{
    "name": "attendant",
    "productName": "Attendant",
    "version": "0.1.0",
    "description": "A simple app to streamline web development by allowing you index.html to open on a live server in the default browser",
    "main": "main.js",
    "scripts": {
        "start": "electron .",
        "pack": "electron-builder --dir",
        "dist": "electron-builder"
    },
    "devDependencies": {
        "electron": "^8.0.1",
        "electron-builder": "^22.3.2"
    },
    "build": {
        "appId": "com.attendant",
        "win": {
            "icon": "./build/icon.png",
            "title": "Attendant",
            "msi": true
        }
    }
}

但是,我收到以下错误:

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

知道为什么会发生这种情况以及如何解决它吗?

与以下package.json:

{
    "name": "attendant",
    "productName": "Attendant",
    "version": "0.1.0",
    "description": "A simple app to streamline web development by allowing you index.html to open on a live server in the default browser",
    "main": "main.js",
    "scripts": {
        "start": "electron .",
        "pack": "electron-builder --dir",
        "dist": "electron-builder build"
    },
    "devDependencies": {
        "electron": "^8.0.1",
        "electron-builder": "^22.3.2"
    },
    "build": {
        "appId": "com.attendant",
        "directories": {
            "buildResources": "build"
        },
        "win": {
            "icon": "build/icon.png",
            "title": "Attendant",
            "msi": true
        }
    }
}

我收到错误:

yarn dist
yarn run v1.22.0
warning package.json: No license field
$ electron-builder build
  • electron-builder  version=22.3.2 os=10.0.18363
  • loaded configuration  file=package.json ("build" field)
  • author is missed in the package.json  appPackageFile=C:\Users\alexr\Documents\GitHub\attendant-app\app\package.json
  ⨯ Invalid configuration object. electron-builder 22.3.2 has been initialised using a configuration object that 
does not match the API schema.
 - configuration.win should be one of these:
   object { additionalCertificateFile?, appId?, artifactName?, asar?, asarUnpack?, certificateFile?, certificatePassword?, certificateSha1?, certificateSubjectName?, compression?, cscKeyPassword?, cscLink?, detectUpdateChannel?, electronUpdaterCompatibility?, extraFiles?, extraResources?, fileAssociations?, files?, forceCodeSigning?, generateUpdatesFilesForAllChannels?, icon?, legalTrademarks?, protocols?, publish?, publisherName?, releaseInfo?, requestedExecutionLevel?, rfc3161TimeStampServer?, sign?, signAndEditExecutable?, signDlls?, signingHashAlgorithms?, target?, timeStampServer?, verifyUpdateCodeSignature? } | null
   -> Options related to how build Windows targets.
   Details:
    * configuration.win has an unknown property 'title'. These properties are valid:
      object { additionalCertificateFile?, appId?, artifactName?, asar?, asarUnpack?, certificateFile?, certificatePassword?, certificateSha1?, certificateSubjectName?, compression?, cscKeyPassword?, cscLink?, detectUpdateChannel?, electronUpdaterCompatibility?, extraFiles?, extraResources?, fileAssociations?, files?, forceCodeSigning?, 
generateUpdatesFilesForAllChannels?, icon?, legalTrademarks?, protocols?, publish?, publisherName?, releaseInfo?, requestedExecutionLevel?, rfc3161TimeStampServer?, sign?, signAndEditExecutable?, signDlls?, signingHashAlgorithms?, target?, timeStampServer?, verifyUpdateCodeSignature? }
    * configuration.win has an unknown property 'msi'. These properties are valid:
      object { additionalCertificateFile?, appId?, artifactName?, asar?, asarUnpack?, certificateFile?, certificatePassword?, certificateSha1?, certificateSubjectName?, compression?, cscKeyPassword?, cscLink?, detectUpdateChannel?, electronUpdaterCompatibility?, extraFiles?, extraResources?, fileAssociations?, files?, forceCodeSigning?, 
generateUpdatesFilesForAllChannels?, icon?, legalTrademarks?, protocols?, publish?, publisherName?, releaseInfo?, requestedExecutionLevel?, rfc3161TimeStampServer?, sign?, signAndEditExecutable?, signDlls?, signingHashAlgorithms?, target?, timeStampServer?, verifyUpdateCodeSignature? }
     How to fix:
     1. Open https://www.electron.build/configuration/win
     2. Search the option name on the page (or type in into Search to find across the docs).
       * Not found? The option was deprecated or not exists (check spelling).
       * Found? Check that the option in the appropriate place. e.g. "title" only in the "dmg", not in the root. 
  stackTrace=























                                                                   ValidationError: Invalid configuration object. electron-builder 22.3.2 has been initialised using a configuration object that does not match the API schema.   























                                                                    - configuration.win should be one of these:  























                                                                      object { additionalCertificateFile?, appId?, artifactName?, asar?, asarUnpack?, certificateFile?, certificatePassword?, certificateSha1?, certificateSubjectName?, compression?, cscKeyPassword?, cscLink?, detectUpdateChannel?, electronUpdaterCompatibility?, extraFiles?, extraResources?, fileAssociations?, files?, forceCodeSigning?, generateUpdatesFilesForAllChannels?, icon?, legalTrademarks?, protocols?, publish?, publisherName?, releaseInfo?, requestedExecutionLevel?, rfc3161TimeStampServer?, sign?, signAndEditExecutable?, signDlls?, signingHashAlgorithms?, target?, timeStampServer?, verifyUpdateCodeSignature? } | null























                                                                      -> Options related to how build Windows targets.























                                                                      Details:























                                                                       * configuration.win has an unknown property 'title'. These properties are valid:























                                                                         object { additionalCertificateFile?, appId?, artifactName?, asar?, asarUnpack?, certificateFile?, certificatePassword?, certificateSha1?, certificateSubjectName?, compression?, cscKeyPassword?, cscLink?, detectUpdateChannel?, electronUpdaterCompatibility?, extraFiles?, extraResources?, fileAssociations?, files?, forceCodeSigning?, generateUpdatesFilesForAllChannels?, icon?, legalTrademarks?, protocols?, publish?, publisherName?, releaseInfo?, requestedExecutionLevel?, rfc3161TimeStampServer?, sign?, signAndEditExecutable?, signDlls?, signingHashAlgorithms?, target?, timeStampServer?, verifyUpdateCodeSignature? }























                                                                       * configuration.win has an unknown property 'msi'. These properties are valid:























                                                                         object { additionalCertificateFile?, appId?, artifactName?, asar?, asarUnpack?, certificateFile?, certificatePassword?, certificateSha1?, certificateSubjectName?, compression?, cscKeyPassword?, cscLink?, detectUpdateChannel?, electronUpdaterCompatibility?, extraFiles?, extraResources?, fileAssociations?, files?, forceCodeSigning?, generateUpdatesFilesForAllChannels?, icon?, legalTrademarks?, protocols?, publish?, publisherName?, releaseInfo?, requestedExecutionLevel?, rfc3161TimeStampServer?, sign?, signAndEditExecutable?, signDlls?, signingHashAlgorithms?, target?, timeStampServer?, verifyUpdateCodeSignature? }























                                                                        How to fix:























                                                                        1. Open https://www.electron.build/configuration/win























                                                                        2. Search the option name on the page (or type in into Search to find across the docs).























                                                                          * Not found? The option was deprecated 
or not exists (check spelling).























                                                                          * Found? Check that the option in the appropriate place. e.g. "title" only in the "dmg", not in the root.















































                                                                       at validate (C:\Users\alexr\Documents\GitHub\attendant-app\app\node_modules\@develar\schema-utils\dist\validate.js:50:11)























                                                                       at validateConfig (C:\Users\alexr\Documents\GitHub\attendant-app\app\node_modules\app-builder-lib\src\util\config.ts:229:3)























                                                                       at Packager._build (C:\Users\alexr\Documents\GitHub\attendant-app\app\node_modules\app-builder-lib\src\packager.ts:342:5)























                                                                       at Packager.build (C:\Users\alexr\Documents\GitHub\attendant-app\app\node_modules\app-builder-lib\src\packager.ts:337:12)























                                                                       at executeFinally (C:\Users\alexr\Documents\GitHub\attendant-app\app\node_modules\app-builder-lib\node_modules\builder-util\src\promise.ts:12:14)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Edit number 2

我现在收到以下错误:

yarn run v1.22.0
warning package.json: No license field
$ electron-builder build
  • electron-builder  version=22.3.2 os=10.0.18363
  • loaded configuration  file=package.json ("build" field)
  • author is missed in the package.json  appPackageFile=C:\Users\alexr\Documents\GitHub\attendant-app\app\package.json
  • writing effective config  file=dist\builder-effective-config.yaml
  • packaging       platform=win32 arch=x64 electron=8.0.1 appOutDir=dist\win-unpacked
  • asar usage is disabled — this is strongly not recommended  solution=enable asar and use asarUnpack to unpack 
files that must be externally available
  ⨯ cannot execute  cause=exit status 1
                    errorOut=Fatal error: Unable to commit changes

                    command='C:\Users\alexr\AppData\Local\electron-builder\Cache\winCodeSign\winCodeSign-2.5.0\rcedit-x64.exe' 'C:\Users\alexr\Documents\GitHub\attendant-app\app\dist\win-unpacked\Attendant.exe' --set-version-string FileDescription Attendant --set-version-string ProductName Attendant --set-version-string LegalCopyright 'Copyright © 2020 Attendant' --set-file-version 1.1.0 --set-product-version 1.1.0.0 --set-version-string InternalName Attendant --set-version-string OriginalFilename '' --set-icon 'C:\Users\alexr\Documents\GitHub\attendant-app\app\dist\.icon-ico\icon.ico'
                    workingDir=
  ⨯ C:\Users\alexr\Documents\GitHub\attendant-app\app\node_modules\app-builder-bin\win\x64\app-builder.exe exited with code ERR_ELECTRON_BUILDER_CANNOT_EXECUTE  stackTrace=

                                                  Error: C:\Users\alexr\Documents\GitHub\attendant-app\app\node_modules\app-builder-bin\win\x64\app-builder.exe exited with code ERR_ELECTRON_BUILDER_CANNOT_EXECUTE

                                                      at ChildProcess.<anonymous> (C:\Users\alexr\Documents\GitHub\attendant-app\app\node_modules\app-builder-lib\node_modules\builder-util\src\util.ts:239:14)

                                                      at Object.onceWrapper (events.js:313:26)

                                                      at ChildProcess.emit (events.js:223:5)

                                                      at maybeClose (internal/child_process.js:1021:16)

                                                      at Process.ChildProcess._handle.onexit (internal/child_process.js:283:5)

                                                  From previous event:

                                                      at processImmediate (internal/timers.js:439:21)

                                                  From previous event:

                                                      at WinPackager.signApp (C:\Users\alexr\Documents\GitHub\attendant-app\app\node_modules\app-builder-lib\src\winPackager.ts:357:27)

                                                      at WinPackager.doPack (C:\Users\alexr\Documents\GitHub\attendant-app\app\node_modules\app-builder-lib\src\platformPackager.ts:243:16)

                                                      at WinPackager.pack (C:\Users\alexr\Documents\GitHub\attendant-app\app\node_modules\app-builder-lib\src\platformPackager.ts:114:5)

                                                      at Packager.doBuild (C:\Users\alexr\Documents\GitHub\attendant-app\app\node_modules\app-builder-lib\src\packager.ts:444:9)

                                                      at executeFinally (C:\Users\alexr\Documents\GitHub\attendant-app\app\node_modules\app-builder-lib\node_modules\builder-util\src\promise.ts:12:14)

                                                      at Packager._build (C:\Users\alexr\Documents\GitHub\attendant-app\app\node_modules\app-builder-lib\src\packager.ts:373:31)

                                                      at Packager.build (C:\Users\alexr\Documents\GitHub\attendant-app\app\node_modules\app-builder-lib\src\packager.ts:337:12)

                                                      at executeFinally (C:\Users\alexr\Documents\GitHub\attendant-app\app\node_modules\app-builder-lib\node_modules\builder-util\src\promise.ts:12:14)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

感谢大家一直以来的支持

我刚刚查看了您的日志,发现了以下错误,

configuration.win has an unknown property 'title'. These properties are valid:

应在 productName 属性 中给出应用程序的标题。根据 document.

title 关键字无效

此外,我发现构建配置中缺少 buildResources。我建议使用 .ico 文件作为图标而不是 png 图片。

"scripts": {
    "start": "electron .",
    "pack": "electron-builder --dir",
    "dist": "electron-builder build"
},
"build": {
    "productName": "Attendant",
    "appId": "com.experiment.attendant",
    "directories": {
        "buildResources": "build"
    },
    "files": [
      "build/**/*",
    ],
    "win": {
        "asar": false,
        "target": "nsis",
        "icon": "build/icon.ico"
    },
    "nsis": {
      "installerIcon": "build/icon.ico",
      "installerHeaderIcon": "build/icon.ico",
      "deleteAppDataOnUninstall": true
    },
}

更多配置,

  1. Common Configurations
  2. Windows Configurations

请参阅 windows 和 Linux 配置的工作示例。 GITHUB

"build":{
    "productName":"yourProductName",
    "appId":"org.yourProductName",
    "dmg":{
        "contents":[
            {
                "x":130,
                "y":220
            },
            {
                "x":410,
                "y":220,
                "type":"link",
                "path":"/Applications"
            }
        ]
    },
    "win":{
        "target":[
            "nsis",
            "msi"
        ]
    },
    "linux":{
        "target":[
            "deb",
            "rpm",
            "snap",
            "AppImage"
        ],
        "category":"Development"
    },
    "directories":{
        "buildResources":"resources",
        "output":"release"
    },
    "files: ["resources/**/*"], // including buildResources folder in order to use this in the code
        },"

我附上了我之前为我的项目配置的示例 electron-builder 配置。 请考虑这部分

"directories": {
    "buildResources": "resources",
    "output": "release"
}

buildResources 应该包括图标等资源文件。如果您不打算手动设置此 buildResources,则默认值为 buildoutput 表示打包应用程序打包后的位置,对于您的问题是可选的。无论如何,我已将项目设置为在“发布”文件夹中生成发布工件。

在这个项目中,我将图标保存在项目根目录中,如下所示。我不知道你的图标文件在哪里,所以我附上了使用这个构建配置的项目结构。