vue+electron-builder打包桌面应用程序，改变桌面图标和程序左上角图标显示不全的问题

最新推荐文章于 2024-04-09 15:02:08 发布
最新推荐文章于 2024-04-09 15:02:08 发布
阅读量2.8k 收藏 4
点赞数 2
文章标签： vue.js electron 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_58185754/article/details/126102948
版权

electron版本19.0.6

使用electron-builder打包项目

生成桌面应用程序图标的过程（参考electron实战书籍）

1、准备1024*1024尺寸的png格式的图片，将该图片放在/public目录下

2、安装electron-icon-builder组件

yarn add electron-icon-builder --dev

3、在package.json的scripts配置节点增加如下配置

"build-icon":"electron-icon-builder --input=./public/xxx.png --output=build --flatten"

4、执行生成应用程序图标的指令

yarn build-icon

此时会在/build/icons中生成各种大小的图标文件

到这里桌面应用程序的图标已经换掉了，但是我发现打开该应用程序后左上角的图标显示不全，如下，只展示了一小部分

 各种搜索，有的说是需要图片小于100KB，有的说是图片需要.ico格式，有的说图片必须256*256

.但是无效

最终我的解决方案如下：

图片是1024*1024，格式为.png，大于100KB

 只需要在vue.config.js中配置如下（红色框）

 

@C&L
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
electron-icon-maker:图标生成器，用于生成电子封装所需的所有图标文件
05-02
电子制造者 全球使用 使用进行全局安装 npm install -g electron-icon-maker 使用 electron-icon-maker --input=/absolute/path/file.png --output=./relative/path/to/folder 本地使用 本地安装 npm install --save-dev electron-icon-maker 使用 ./node_modules/.bin/electron-icon-maker --input=/absolute/path/file.png --output=./relative/path/to/folder 争论 --output, -o = [String] Folder to create files --input, -i = [String] Path to PNG file 推荐
electron 打包exe图标异常问题
naisi2422553065的博客
07-26 4443
electron打包exe图标异常 我们都知道 在使用electron 打包成exe的时候使用的是使用 ico 来打包 官方推荐大小是 256*256 但是我是我们应用的时候发现图标并不能正确的显示 如下: 为此我打开了electron的官方图标 用icoFX 打开一看 原来使用的 ico是类似于 俄罗斯套娃的存在 展开是 256*256 128*128 64*64 32*32 16*...
electron-builder打包程序托盘栏图标消失
qq_35907012的博客
01-21 624
我在学习用vue+electron builder写项目时遇到了一个问题，就是当我在打包前测试的时候能正常显示托盘栏图标，但是在打包后启动时显示托盘栏图标为空白，并且过了一会儿就自动消失了，但是程序仍在后台运行并没有退出。这里我用的图标都是vue cli自动生成的public文件夹下的图片，如果想用自己的直接替换图片即可。其实通过观察编译后的文件夹就可以观察出，打包的时候并没有将托盘栏图标打包进去，而想要将其打包进去只要在。这个文件中大约470行处添加这么一行代码即可解决用户名为中文导致的乱码问题。
Electron+Vue项目打包后背景图片丢失问题
最新发布
qq_62291805的博客
04-09 240
本地启动的项目，背景图片是可以显示的，但是打包之后，启动exe文件，发现启动之后只有背景图没有显示。在vue.config.js文件中添加customFileProtocol:'./'再次打包项目，启动exe，发现背景图片已经可以显示了。打包后打开控制台发现是路径错误。我的背景图是通过css引入的。
electron-builder打包桌面运行只显示一半图标,桌面图标和程序左上角图标显示不全的问题
weixin_43239880的博客
04-10 1221
electron-builder打包桌面运行只显示一半图标,桌面图标和程序左上角图标显示不全的问题
electron-vue windows打包后左上角图标无法显示问题
ling_lang的博客
07-23 1454
解决方法 1、图标必须是256x256大小的 2、使用png格式或者ico格式的图标 关于图标的格式，有个问题，我有两个electron项目，是使用不同的脚手架构建的，一个使用的是ico格式的图标，打包后的应用左上角的小图标可以正常显示。 但是另一个在使用ico格式图标的时候，打包后无法正常显示左上角图标，后面改为使用png格式的图标打包后可以正常显示。 所以说，虽然都是基于electron的项目，但是图标的使用样式可能有些许差别。 ...
electron-packager 将网页打包成桌面端应用设置icon不起作用，替换electron-packager默认图标
G佳伟
05-23 2376
electron-packager 将网页打包成桌面端应用设置icon不起作用，替换electron-packager默认图标，Electron在windows平台下需要使用 .ico 格式作为图标文件，而非 .png 或 .svg 格式，因此您应该将图标文件转换为 .ico 格式。此外，务必确保图像大小不大于 256x256 像素。
electron 左上角图标 dev(开发环境)可显示 build(打包)后无法显示
qq_45831414的博客
09-14 751
ico是Iconfile的缩写，是Windows计算机中的一种图标文件格式，一般我们电脑桌面上显示的快捷方式就是这种格式的图标。一个ico文件实际上是多张不同尺寸图片的集合体，根据应用场景的不同自动选择合适的图片格式。知道ico文件的含义后，便能明白无法显示是因为我们之前的ico文件中不包含左上角那种尺寸的图片，因而无法加载图标，所以只要富集多种尺寸，即可解决问题。先说解决方法，用于作为图标的ico文件需要富集多种尺寸，必须包含256*256，且同时应当包含其他更小的尺寸。接下来解释一下这么做的原因。
Electron项目中通过electron-vue + electron-builder + electron-updater实现远程更新（包含源码）
04-01
Electron项目中通过electron-vue + electron-builder + electron-updater实现远程更新（包含源码）
Vue+Electron（electron-builder + electron-updater + electron-log）
09-06
使用Vue+Electron（electron-builder + electron-updater + electron-log）实现桌面应用程序的开发，面向所有electron使用者学习使用，内部源码都有注释。可参考文章（http://t.csdn.cn/BLM6Y）使用。
基于Vue+Electron构建桌面应用程序实践
01-27
它给开发人员提供了vue-cliscanffolding、常见的Vue插件、打包器、测试、开发工具和其他功能。我们要构建一个跟上一篇文章中所述的一样的应用程序，基于OpenWeatherMap API的该应用程序用来查看用户所选择城市的天气...
xhznl-todo-list:一个使用electron + vue + electron-builder开发的跨平台todolist（便签）桌面应用
05-09
:sparkles:一个使用 electron + vue + electron-builder 开发的跨平台 todolist（便签）桌面应用 相关技术 ...... 功能预览 步骤 npm install npm run electron:serve npm run electron:build 下载 releases：...
将Vue项目打包为桌面应用 electron
故人两相忘的博客
01-06 1764
用electron-quick-start打包vue桌面程序
iview使用时部分图标不显示
baidu_41682543的博客
09-24 1549
最近在使用iview时，发现icon中部分图标不能显示，询问度娘后才知之前引入的是 " view-design " 而不是官网的 " iview " 。 iview官网地址：https://iview.github.io/components/icon view-design官网地址：https://www.iviewui.com/components/icon ...
electron-builder中NSIS相关配置之自定义设置安装图标等
热门推荐
N years的博客
05-06 1万+
// 特别注意 图标必须是ico格式的才行，png图标转ico可参照（https://www.jb51.net/softjc/93414.html##2） // options placed here will be merged with default configuration and passed to electron-builder const isDevelopment = pro...
2,【electron+vue】 构建桌面应用——常见的功能及问题(修改桌面图标,软件图标,窗口图标,图标不显示问题,影藏默认菜单栏,开机自启,手动或被动关闭应用)
$
09-27 2527
1.首先这些图标必须是结尾的图片,如果你将其他格式的图片改成.ico的,也不行哦,至于为什么,我也没深入研究,按着规定来就好.2.如何获取.ico格式的图片或者说如何将其他格式的图片转换成.ico格式的图片呢,这里推荐一个app,名字是,大家自行搜索安装使用哈,给大家看下大概的界面:3,前两步弄好后,咱们就有了ico的图片,现在替换默认的图片,在你声明主进程的地方这是修改应用左上角的图标4,修改桌面的图标, .exe前面的图标。
在vue项目中使用electron,生成桌面图标，快速打开系统
fang0321的博客
09-07 1846
在vue项目中使用electron,生成桌面图标，快速打开系统
Electron为文件浏览器创建图标(三)
weixin_30301449的博客
07-03 399
在前面的文章中，请看之前文章,我们已经完成了使用 electron做文件浏览器这么一个应用，现在我们需要为应用创建图标操作。为应用创建图标以后，我们就可以从计算机中与其他应用区分开来，如果我们自己会做icon图片的话，我们自己使用ps做一个icon图标来当做我们的应用图标。针对不同的操作系统，文件格式不同，显示应用图标的方式也是不一样的。因此我们需要自己手动做一个比较好。 因此第一步：需要创建一...
Electron应用图标的配置与生成
duzm200542901104的专栏
03-21 8544
electron修改项目打包后的exe图标和打开之后的窗口图标
Electron设置桌面托盘
06-10
在Electron中，你可以使用`Tray`模块来创建和管理系统托盘图标。 以下是一个简单的例子，演示如何在Electron应用程序中创建一个系统托盘： ```javascript const { app, Tray, Menu } = require('electron') const path = require('path') let tray = null app.whenReady().then(() => { tray = new Tray(path.join(__dirname, 'icon.png')) const contextMenu = Menu.buildFromTemplate([ { label: 'Item 1', type: 'normal' }, { label: 'Item 2', type: 'normal' }, { label: 'Item 3', type: 'normal' }, { label: 'Quit', type: 'normal', click: () => app.quit() } ]) tray.setToolTip('My App') tray.setContextMenu(contextMenu) }) ``` 在上面的例子中，我们使用了`Tray`模块创建了一个系统托盘图标，并将图标设置为`icon.png`。然后，我们使用`Menu`模块创建了一个上下文菜单，并将其设置为系统托盘的右键菜单。最后，我们使用`setToolTip`方法设置了系统托盘的提示文本。 当你运行这个例子时，你将看到一个系统托盘图标出现在你的操作系统的任务栏中。当你右键单击图标时，将弹出上下文菜单。 需要注意的是，当你的应用程序退出时，你需要使用`tray.destroy()`方法来销毁系统托盘图标。这样可以确保在退出应用程序时，系统托盘图标也会被清除。 ```javascript app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit() } tray.destroy() // 销毁系统托盘图标 }) ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值