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图片。
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