当前位置：首页 > news >正文

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

news 来源：原创 2025/4/27 16:42:11

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的缓存。

新建delecatch.bat文件
复制脚本内容到文件中去
以管理员身份执行脚本
再次打包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