electron-forge打包自定义应用图标

2022-05-17  乐帮网

electron

electron 18.2.3 打包的时候需要更新图标,前提条件是我使用的是官方推荐的forge方式打包,过程如下:
首先安装 electron-forge,使用以下命令:

npm install --save-dev @electron-forge/cli

使用以下命令配置 Forge 

npx electron-forge import

注意以上命令一个app只执行一次就够了,重复打包不需要重复执行。执行完以上命令后在我们的package.json里会有一些更改。为了更改图标首先得搞清楚图标显示的两个地方(1) exe的图标  (2)electron网页打开的时候显示在浏览器里的图标。
首先改生成的exe图标,我们需要修改package.json,这里修改如下:

"config": {
    "forge": {
      "packagerConfig": {
        "name": "winStartup",
        "icon": "favicon.ico"
      },
      "makers": [
        {
          "name": "@electron-forge/maker-squirrel",
          "config": {
            "name": "dts_client"
          }
        },
        {
          "name": "@electron-forge/maker-zip",
          "platforms": [
            "darwin"
          ]
        },
        {
          "name": "@electron-forge/maker-deb",
          "config": {}
        },
        {
          "name": "@electron-forge/maker-rpm",
          "config": {}
        }
      ]
    }
  }

主要是两个部分"name": "winStartup" 和 "icon": "favicon.ico" 名称就是我们打包成exe的名称,icon是我们图标的路径,我是放到根目录。
第二部分是修改浏览器中的图标:在main.js中或者你的是index.js中修改如下:
 

 new BrowserWindow({
fullscreen: true,
    width: 1280,
    height: 720,
    icon: `${__dirname}/favicon.ico`,
    autoHideMenuBar: true
   // webPreferences: {
    //  preload: path.join(__dirname, 'preload.js')
    //}
  })

利用ico直接指定图标。

最后使用以下命令打包发布:

npm run make
> my-electron-app@1.0.0 make /my-electron-app
> electron-forge make

✔ Checking your system
✔ Resolving Forge Config
We need to package your application before we can make it
✔ Preparing to Package Application for arch: x64
✔ Preparing native dependencies
✔ Packaging Application
Making for the following targets: zip
✔ Making for target: zip - On platform: darwin - For arch: x64

 

公众号二维码

关注我的微信公众号
在公众号里留言交流
投稿邮箱:1052839972@qq.com

庭院深深深几许?杨柳堆烟,帘幕无重数。
玉勒雕鞍游冶处,楼高不见章台路。
雨横风狂三月暮。门掩黄昏,无计留春住。
泪眼问花花不语,乱红飞过秋千去。

欧阳修

付款二维码

如果感觉对您有帮助
欢迎向作者提供捐赠
这将是创作的最大动力