律师事务所网站建设网络营销推广方式案例

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. 操作步骤

1. 把我们准备的png图片放到静态资源包中，先使用256 * 256的png图片进行yarn run build打包
2. 打包成功后，在打包文件夹中找到.icon-ico文件夹。里边又electron生成一个256 * 256的ico文件。文件名字为icon.ico
3. 把icon.ico复制到根目录，修改icon路径为icon.ico
4. 重新打包。如果打包异常就执行delcatch脚本
   （清理window对electron的缓存）清理t完之后，就能成功打包拉

4. 代码

builderOptions: {productName: "zeus",mac: {// icon: "./public/login2.ico", //图标路径},win: {//这里先用png，后用electron打包生成的icon.icoicon: "./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外壳程序explorertaskkill /f /im explorer.exerem 清理系统图标缓存数据库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 PastIconsStreamrem 重启Windows外壳程序explorerstart explorer