electron更换图标的run build后左上角图标不显示问题

在使用electron+vue开发一个桌面应用,打包过程遇到坑,替换窗口的左上角图标让我搞了一天,网上说的什么格式或者路径问题都没对,最后在我将要放弃胡乱尝试之后居然成功了。

1、造成的原因

因为一开始打包过程参考了网上的一些打包文件配置,在package.json文件里面胡乱配置了一些参数,关于图标的配置也设置了(如下图1),一开始我以为在这里配置的图标是关于打包后生成exe文件的图标,所以就没管,但是仅在这里配置一下状态栏跟窗口的左上角图标还是electron默认图标,然后本人就以更改状态栏图标跟窗体左上角图标为目标去网上找参考案例,
在这里插入图片描述
网上都是说在创建窗口的时候配置icon属性,于是我就跟着教程来配置一遍了,一开始,我将图标放在build文件夹下面了,在开发环境下完全没问题,但是打包后问题来了,还是默认原来的图标,后来我突然想起放在build文件夹下是不经过打包流程(build文件夹是经过run build后生成的,我这里配置打包后的出口文件)于是我就将ico图标放在main下跟index.js同层路径下,满怀信心npm run dev 成功哈哈图标替换成功,然后npm run build,然后。。。(靠)左上角图标居然不显示,默认图标也没了,状态栏的图标是替换成功,到这里个人认为不会是图标的路径或者图标的格式问题,但是去网上找了半天全是说因为图标的格式或者图标的大小问题,于是没办法还是照着他们的方法来一遍(屁用都没有噢)还下载了个ico图标转换格式的软件(很垃圾)其实线上的图标格式转换足够了,并不是图标的格式或者图标大小的问题毕竟状态栏都显示了,而且我还用png的图片尝试过状态栏也是正常显示,唯独左上角的图标没换。
在这里插入图片描述

### 如何在 Electron 应用程序中更改图标 为了成功更换Electron应用程序的图标,需准备一张适合作为图标的图片文件,推荐使用PNG格式。之后利用能够转换图片至ICO格式的工具处理该图片,比如通过“在线转换icon图标工具”,确保最终获得的是超过256*256尺寸、具有.ico扩展名的文件[^1]。 将上述生成好的ICO文件放置于Electron项目的`public`或`assets`目录下。随后,在`package.json`文档内定位到`"build"`属性处,新增一项名为`"icon"`的键值对,其对应的值应指向先前所保存的ICO文件的具体位置。例如: ```json { "name": "your-app-name", ... "build": { "appId": "com.example.app", "productName": "YourAppName", "files": [ "dist/**/*" ], "directories": { "output": "release-builds" }, "mac": { "icon": "build/icon.icns" }, "win": { "icon": "build/icon.ico" } } } ``` 对于希望简化这一流程的情况,还可以考虑引入专门用于创建各种平台所需格式图标的库——`electron-icon-builder`。安装此依赖项后,可以在`package.json`中的脚本部分定义一条指令用来自动化图标制作过程,如下所示[^3]: ```json "scripts": { "start": "electron .", "electron:generate-icons": "electron-icon-builder --input=./public/favicon.png --output=build --flatten" }, ``` 执行`npm run electron:generate-icons`命令即可依据指定输入源自动生产适用于同操作系统的图标集,并存放在项目根目录下的`build`子文件夹里。最后一步则是移除旧有的打包成果(如`dist_electron`),再次调用构建命令(如`npm run build` 或 `yarn build`)以应用新的视觉元素变化。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值