Electron打包图标不显示解决方案

简介: Electron打包图标不显示解决方案

Electron打包图标不显示解决方案

1. 现象

最近做了一个vue3+electron-vue+elementplus的小软件,最终打包生成exe应用程序,应用程序的logo和启动logo状态栏logo、安装logo全部正常,本地yarn run serve ,左上角logo也正常,但是一打包。坐上logo就不显示了。如果去掉图标配置,electron使用默认logo,就可以正常显示。踩坑良久,搜了许许多多解决方案,终于解决了这一问题。


2. 说明

electron必须使用256*256的图片,所以需要提前准备这样大小的图片。我们需要先准备一张256 * 256的png格式的图片。如果需要ico可以用这个网站生成256 * 256 的ico图片。


http://ico.116wz.com/


3. 操作步骤

把我们准备的png图片放到静态资源包中,先使用256 * 256的png图片进行yarn run build打包

打包成功后,在打包文件夹中找到.icon-ico文件夹。里边又electron生成一个256 * 256的ico文件。文件名字为icon.ico

把icon.ico复制到根目录,修改icon路径为icon.ico

重新打包。如果打包异常就执行delcatch脚本

(清理window对electron的缓存)清理t完之后,就能成功打包拉

4. 代码

builderOptions: {
        productName: "zeus",
        mac: {
          // icon: "./public/login2.ico", //图标路径
        },
        win: {
        //这里先用png,后用electron打包生成的icon.ico
          icon: "./public/logo.png", //图标路径,
          target: [{
            target: 'nsis', // 利用nsis制作安装程序
            'arch': [
              'x64', // 64位
              'ia32'
            ]
          }]
        },
        nsis: {
          oneClick: false, // 一键安装
          perMachine: true, // 是否开启安装时权限限制(此电脑或当前用户)
          allowElevation: true, // 允许请求提升。 如果为false,则用户必须使用提升的权限重新启动安装程序。
          allowToChangeInstallationDirectory: true, // 允许修改安装目录
          installerIcon: "./public/win.ico", // 安装图标
          uninstallerIcon: "./public/win.ico", //卸载图标
          installerHeaderIcon: "./public/win.ico", // 安装时头部图标
          createDesktopShortcut: true, // 创建桌面图标
          createStartMenuShortcut: true, // 创建开始菜单图标
          shortcutName: "zeus", // 图标名称
        }
      }

5. delcatch脚本

清除windows对electron的缓存。

  1. 新建delecatch.bat文件
  2. 复制脚本内容到文件中去
  3. 以管理员身份执行脚本
  4. 再次打包electron
rem 关闭Windows外壳程序explorer
taskkill /f /im explorer.exe
rem 清理系统图标缓存数据库
attrib -h -s -r "%userprofile%\AppData\Local\IconCache.db"
del /f "%userprofile%\AppData\Local\IconCache.db"
attrib /s /d -h -s -r "%userprofile%\AppData\Local\Microsoft\Windows\Explorer\*"
del /f "%userprofile%\AppData\Local\Microsoft\Windows\Explorer\thumbcache_32.db"
del /f "%userprofile%\AppData\Local\Microsoft\Windows\Explorer\thumbcache_96.db"
del /f "%userprofile%\AppData\Local\Microsoft\Windows\Explorer\thumbcache_102.db"
del /f "%userprofile%\AppData\Local\Microsoft\Windows\Explorer\thumbcache_256.db"
del /f "%userprofile%\AppData\Local\Microsoft\Windows\Explorer\thumbcache_1024.db"
del /f "%userprofile%\AppData\Local\Microsoft\Windows\Explorer\thumbcache_idx.db"
del /f "%userprofile%\AppData\Local\Microsoft\Windows\Explorer\thumbcache_sr.db"
rem 清理 系统托盘记忆的图标
echo y|reg delete "HKEY_CLASSES_ROOT\Local Settings\Software\Microsoft\Windows\CurrentVersion\TrayNotify" /v IconStreams
echo y|reg delete "HKEY_CLASSES_ROOT\Local Settings\Software\Microsoft\Windows\CurrentVersion\TrayNotify" /v PastIconsStream
rem 重启Windows外壳程序explorer
start explorer


目录
相关文章
|
1月前
|
资源调度 运维 JavaScript
使用electron创建桌面应用及常见打包错误解决
使用electron创建桌面应用及常见打包错误解决
208 3
|
1月前
|
前端开发 Unix Linux
揭秘 Electron 的 Linux 打包过程:你知道背后发生了什么吗?
本文详细介绍了 `electron-builder` 在 Linux 平台上如何打包 Electron 应用程序,涵盖了 AppImage、Flatpak、Snap 等多种格式的打包原理和具体实现。文章从初始化 `LinuxPackager` 到创建各种目标格式的包,详细解析了每个步骤的代码逻辑和关键方法,帮助开发者更好地理解和使用 `electron-builder` 进行 Linux 应用的打包。
75 2
揭秘 Electron 的 Linux 打包过程:你知道背后发生了什么吗?
|
5月前
|
资源调度 JavaScript 前端开发
IM跨平台技术学习(十一):环信基于Electron打包Web IM桌面端的技术实践
这次借着论证 Web IM端 SDK 是否可以在 Electron 生成的桌面端正常稳定使用,我决定把官方新推出的 webim-vue3-demo,打包到桌面端,并记录了这次验证的过程以及所遇到的问题和解决方法。
93 2
|
1月前
|
安全 前端开发 iOS开发
揭秘 electron-builder:macOS 应用打包背后到底发生了什么?
本文详细介绍了 Electron 应用在 macOS 平台上的打包流程,涵盖配置文件、打包步骤、签名及 notarization 等关键环节。通过剖析 `electron-builder` 的源码,展示了如何处理多架构应用、执行签名,并解决常见问题。适合希望深入了解 macOS 打包细节的开发者。
41 2
|
1月前
|
XML 缓存 前端开发
Electron-builder 是如何打包 Windows 应用的?
本文首发于微信公众号“前端徐徐”,作者徐徐深入解析了 electron-builder 在 Windows 平台上的打包流程。文章详细介绍了 `winPackager.ts`、`AppxTarget.ts`、`MsiTarget.ts` 和 `NsisTarget.ts` 等核心文件,涵盖了目标创建、图标处理、代码签名、资源编辑、应用签名、性能优化等内容,并分别讲解了 AppX/MSIX、MSI 和 NSIS 安装程序的生成过程。通过这些内容,读者可以更好地理解和使用 electron-builder 进行 Windows 应用的打包和发布。
109 0
|
3月前
|
iOS开发 MacOS Python
Electron Mac 打包报 Error: Exit code: ENOENT. spawn /usr/bin/python ENOENT 解决方法
Electron Mac 打包报 Error: Exit code: ENOENT. spawn /usr/bin/python ENOENT 解决方法
|
4月前
|
JavaScript 网络安全 iOS开发
如何用 Electron 打包chatgpt-plus.top并生成mac客户端
如何用 Electron 打包chatgpt-plus.top并生成mac客户端
50 0
|
4月前
|
JavaScript 区块链
从零开始:如何用Electron将chatgpt-plus.top 打包成EXE文件
从零开始:如何用Electron将chatgpt-plus.top 打包成EXE文件
54 0
|
6月前
|
Linux Windows
教你在Linux上安装Node并用Electron打包deb和rpm包
教你在Linux上安装Node并用Electron打包deb和rpm包
376 9
|
6月前
|
前端开发 数据可视化 iOS开发
基于electron快速将任意网站打包成跨平台的桌面端软件
基于electron快速将任意网站打包成跨平台的桌面端软件
213 1