【electron】 打包应用修改图标和进程名字

导读

以下内容在https://gitee.com/zkyt/electron-vue-element-admin上做的。

开发环境

打包流程

制作一个大于等于256*256的icon

在网上找了两个网站，都可以制作icon，但是第二个最大只能制作128*128的，所以我们选择第一个网站。

• https://app.xunjiepdf.com/img2icon/ （用这个网站）
• https://www.bitbug.net/ （只能制作128*128的）

ps:

• 网上说，通过工具IconWorkshop或icoFX可以生成ico，未尝试。
• 也可以在一些好的网站直接下载满足条件的ico。

修改package.json

在package.json中的build字段做如下修改：

• 生成进程名：productName。
• 修改图标修改win > icon，然后将ico拷贝到对应文件夹中。

{
  "build": {
    "productName": "Doraemon",
    "appId": "fun.l0l.vue-element-admin",
    "directories": {
      "output": "build"
    },
    "files": [
      "dist/electron/**/*"
    ],
    "win": {
      "icon": "build/icons/icon.ico"
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

执行 npm run build 生成应用

  "scripts": {
    "build": "node .electron-vue/build.js && electron-builder"
  }
1
2
3

效果图

• 生成目录： MyAndroidAssemble\electronTools\build
• 安装文件： MyAndroidAssemble\electronTools\build\Doraemon Setup 4.2.1.exe
• 可执行文件：MyAndroidAssemble\electronTools\build\win-unpacked\Doraemon.exe
  

踩坑

icon必现大于等于 256*256

生成过程中会报错！！！

图片有损

据说IconWorkshop可以解决

icon图标要包含各种分辨率的

错误图片示例：

正确的图片示例：

两个ico通过VS打开，比较内容，正确的ico包含各种分辨率：

resources\app.asar占用

这个一般是文件被打开或者VSCode等工具占用了该文件，关闭掉相应进程就行了。
对于VSCode占用，可以通过procexp查找句柄，然后关闭对应句柄就可以了。

参考资料

• 代码地址： https://gitee.com/zkyt/electron-vue-element-admin
• 关于electron在打包项目时如何更换所有的应用程序图标.ico https://blog.csdn.net/weixin_41262999/article/details/108936206