关于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配置文件如下

yaml 复制代码
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的环境选择适合分辨率的图标。再进行打包后问题解决。

yaml 复制代码
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配置您对应的

perl 复制代码
"homepage": "/",
"author": "xxx <xxxx@xxx.com>",

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

相关推荐
Cacciatore->5 小时前
Electron 快速上手
javascript·arcgis·electron
vvilkim5 小时前
Electron 进程间通信(IPC)深度优化指南
前端·javascript·electron
ZJ_.10 天前
Electron自动更新详解—包教会版
linux·前端·javascript·windows·electron·前端框架·node.js
£小羽毛10 天前
Electron(01)入门与实战:从环境搭建到打包发布
前端·javascript·electron
摘取一颗天上星️11 天前
Electron架构深度解析:用Web技术构建桌面应用的桥梁
前端·架构·electron
waynaqua11 天前
《情感反诈模拟器》爆火,背后的技术解析
electron
SuperherRo12 天前
Web攻防-XSS跨站&浏览器UXSS&突变MXSS&Vue&React&Electron框架&JQuery库&写法和版本
vue.js·electron·jquery·react·xss·mxss·uxss
£小羽毛13 天前
Electron (02)集成 SpringBoot:服务与桌面程序协同启动方案
java·spring boot·electron
我是来人间凑数的13 天前
electron 配置特定文件右键打开
前端·javascript·electron
集成显卡14 天前
图片压缩工具 | Electron应用配合 commander 提供命令行调用功能
前端·javascript·electron·人机交互·命令行·cmd