关于Electron-builder打包Linux应用图标不显示问题解决方案。

前言

对于一向没空的我，几乎是没时间写技术文章的，之所以今晚抽空写下这篇文章，是因为我被这个问题折磨了两天两夜了，在查阅了无数解决方案无果后，又在chatGPT问了无数次解决方案后，终于被我问出来了。直接在网上搜是很难得到具体的解决的，网上99%的帖子的回答都是拖泥带水一笔带过，很难找到解决办法！由于我也是第一次使用electron-builder打包liuux应用，我也是通过尝试了无数种可能，在虚拟机的linux环境下，修改了N多次配置，打包了n多次才有思路，进而依据自己的思路去提问chatGPT才问出来的。

技术背景

我的项目是electron+ electron-builder + react的解决方案，使用electron-builder构建linux项目的,应用的图标文件我放在了项目根目录下的icons文件下。这里主要是解决linux下打包应用图标问题的，配置文件只给出针对linux配置的相关代码。

出现问题的electron-builder.yml配置文件如下

appId: myapp
productName: myapp
directories:
  output: release/${version}
  buildResources: dist
files:
  - "dist/**/*"
asarUnpack:
  - icons/*
linux:
  target:
    - AppImage
    - deb
    - rpm
  maintainer: electronjs.org
  icon: icons/icon.png
  category: Utility
  artifactName: ${productName}-Linux-${version}.${ext}

分析解决问题

electron-builder打包linux的icon，我的配置是直接使用了icons/icon.png，路径是写死一张图的。当我在Linux下打包后，成功安装应用，但是应用图标一直无法显示，

然后chatGPT给出的分析如下：

我按照chatGPT给出的这几种可能导致问题的情况，挨个处理后发现问题还是无法解决。

最终解决思路：

后来分析处理问题的过程中，看到官网的如上文档，我选择尝试直接将linux下的icon配置，从直接写死的icons/icon.png路径，直接配置成一个icons文件夹，文件夹里放入不同尺寸的图标，让electron-builder打包时自动选择linux环境下合适分辨率的图标。然后求证chatGPT后，也对这个方案给出了肯定的答复。

项目根目录下icons文件夹里面的图标包括：16x16.png、32x32.png、48x48.png、64x64.png、96x96.png、128x128.png、256x256.png、512x512.png、1024x1024.png、icon.icon、icon.png(256*256) 以上都是相同logo的不同尺寸图标，可以让UI设计师切图，或者使用npm安装electron-icon-builder工具生成不同尺寸的图标(github.com/safu9/elect...)

最后的配置如下

按如下直接将linux的icon图标配置成icons文件夹，在linux打包时，让electron-builder自动根据当前linux的环境选择适合分辨率的图标。再进行打包后问题解决。

appId: myapp
productName: myapp
directories:
  output: release/${version}
  buildResources: dist
files:
  - "dist/**/*"
asarUnpack:
  - icons/*
linux:
  target:
    - AppImage
    - deb
    - rpm
  maintainer: electronjs.org
  icon: icons
  category: Utility
  artifactName: ${productName}-Linux-${version}.${ext}

打包的时候如果有报错缺少homepage、author、Email的，请在package.json配置您对应的

"homepage": "/",
"author": "xxx <[email protected]>",

问题解决了，希望我的分享能帮到遇到问题的小伙伴们，少掉点头发。