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


目录
相关文章
|
4月前
|
资源调度 JavaScript 前端开发
IM跨平台技术学习(十一):环信基于Electron打包Web IM桌面端的技术实践
这次借着论证 Web IM端 SDK 是否可以在 Electron 生成的桌面端正常稳定使用,我决定把官方新推出的 webim-vue3-demo,打包到桌面端,并记录了这次验证的过程以及所遇到的问题和解决方法。
74 2
|
2月前
|
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 解决方法
|
3月前
|
JavaScript 网络安全 iOS开发
如何用 Electron 打包chatgpt-plus.top并生成mac客户端
如何用 Electron 打包chatgpt-plus.top并生成mac客户端
35 0
|
3月前
|
JavaScript 区块链
从零开始:如何用Electron将chatgpt-plus.top 打包成EXE文件
从零开始:如何用Electron将chatgpt-plus.top 打包成EXE文件
29 0
|
5月前
|
Linux Windows
教你在Linux上安装Node并用Electron打包deb和rpm包
教你在Linux上安装Node并用Electron打包deb和rpm包
262 9
|
5月前
|
前端开发 数据可视化 iOS开发
基于electron快速将任意网站打包成跨平台的桌面端软件
基于electron快速将任意网站打包成跨平台的桌面端软件
130 1
|
5月前
|
Windows
(成功踩坑)electron-builder打包过程中报错
(成功踩坑)electron-builder打包过程中报错
1138 0
|
11月前
|
Web App开发 前端开发 JavaScript
用electron打包前端应用初体验
用electron打包开发桌面应用遇到的各种问题和解决办法
157 1
electron打包的exe程序,点击安装却执行了卸载的问题
在window平台下 electron打包的exe安装后,在没卸载的情况下,重新点击exe安装,会执行卸载,再点一次才是安装; 针对这个问题,我注释了打包里的一个配置,就好了,如下
362 0
|
前端开发 JavaScript 开发工具
ruoyi-vue | electron打包教程(超详细)
ruoyi-vue | electron打包教程(超详细)
1081 0