electron修改vue项目打包后的exe图标

原创 已于 2022-04-04 15:28:11 修改 · 5.3k 阅读 · 16 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#前端 #electron #vue.js #经验分享
于 2022-03-06 13:51:46 首次发布
本文档介绍了如何使用electron-icon-builder为Vue.js应用程序生成和设置图标。首先，通过npm安装electron-icon-builder，然后在package.json的scripts中添加生成图标命令。将图标文件（icon.png）放入public目录，运行指定命令生成图标。生成的图标位于build/icons目录下。最后，删除dist_electron目录，重新执行打包命令npm run electron:build，即可看到exe图标更新。

低功耗蓝牙项目，需要一块懂省电的板

思澈 SF32LB52 芯片，BLE 协议栈深度优化，上手即开发

点击查看

vue用electron打包点击这里

安装electron-icon-builder

添加图标生成器：npm i electron-icon-builder
在这里插入图片描述

生成图标

1、在package.json的scripts中添加一条命令并保存：
“electron:generate-icons”: “electron-icon-builder --input=./public/icon.png --output=build --flatten”
在这里插入图片描述

2、将你准备的图片命名为icon.png并复制到public目录下：
在这里插入图片描述

3、执行命令：npm run electron:generate-icons
在这里插入图片描述

4、生成的一系列图片在项目中多出来的build目录下的icons下：
在这里插入图片描述

重新打包

1、删除dist_electron文件夹，重新执行打包命令，npm run electron:build
2、打包完成后发现exe图标改变了：
在这里插入图片描述

低功耗蓝牙项目，需要一块懂省电的板

思澈 SF32LB52 芯片，BLE 协议栈深度优化，上手即开发

点击查看
Electron应用图标修改全攻略：从窗口到打包的完整流程（附常见问题解决）
weixin_29231725的博客
03-17 82
本文详细介绍了Electron应用图标修改的全流程，包括窗口图标设置、打包图标配置以及常见问题解决方案。针对Windows和macOS平台的不同需求，提供了图标规格要求、生成工具推荐和代码示例，帮助开发者快速实现专业级的图标配置，提升应用视觉效果和用户体验。
【electron】 打包应用修改图标和进程名字
kinghzking的专栏
11-20 8823
这个一般是文件被打开或者VSCode等工具占用了该文件，关闭掉相应进程就行了。在网上找了两个网站，都可以制作icon，但是第二个最大只能制作。制作一个大于等于256*256的icon。resources\app.asar占用。制作一个大于等于256*256的icon。resources\app.asar占用。icon必现大于等于 256*256。icon必现大于等于 256*256。icon图标要包含各种分辨率的。icon图标要包含各种分辨率的。修改package.json。修改package.json。
electron-packager 打包桌面应用图标失效？5种排查与解决方案全解析
最新发布
weixin_42665725的博客
04-10 216
本文全面解析electron-packager打包桌面应用时图标失效的5种常见原因及解决方案，包括图标格式要求、路径问题、缓存机制等关键点。针对Windows和macOS平台的不同需求，提供专业的图标转换建议和代码层面的双重保障方案，帮助开发者彻底解决electron-packager打包中的图标显示问题。
Electron 图标修改
weixin_64684095的博客
01-13 1877
在 Electron 的主进程代码中，通常是`main.js`文件，在创建`BrowserWindow`实例时，使用`icon`选项来设置窗口图标。
【Electron-vue】创建桌面应用（12）- 修改electron窗口图标和桌面图标
chenqk_123的专栏
10-16 1万+
1.前言 直到今天Electron-vue项目终于到打包联调的的最后阶段了，在本地调试没有问题的情况下，需要进行最后一步的模拟真实环境下的调试了。 默认打包将会使用默认的图标，所以打包之后的项目需要做以下几点修改 静态资源路径的修改 打包后窗体图标的修改 安装之后的图标修改 将会在下面的配置修改中统一处理 2.配置修改 2.1 静态资源路径的修改 由于我需要去调度/执行另外一个exe文件，所以我需要将开发环境和生产环境作区分，所以需要配置不同环境下的exe文件(暂时称为服务端exe)的路径。 服务端
electron 应用图标修改
A_man_of_ideas的博客
12-01 5275
修改窗口图标 更换Electron应用程序的桌面图标 准备好你想要作为图标的图片文件，可以是PNG格式 安装一个可以转换图片格式为ICO的工具，例如在线转换工具“在线转换icon图标工具”。将你的PNG图片文件上传并转换为ICO格式 将转换得到的ICO文件放到你的Electron项目的public或assets文件夹中（桌面应用图标要求大小不能超过256*256这个，且后缀为【.ico】,将图标放到固定文件目录中（自建）） 在package.json文件中，找到"build"字段
Electron应用图标的配置与生成
热门推荐
duzm200542901104的专栏
03-21 2万+
electron修改项目打包后的exe图标和打开之后的窗口图标
vue + electron 打包成桌面应用exe
qq_42214033的博客
07-24 2088
vue + electron 打包成桌面应用exe 1. 背景 由于老板突然让我将之前做的一个vue项目套壳成一个桌面应用程序，一头雾水的我开始百度，然后就找到了electron。他是一个跨平台的桌面应用开发工具。看了看后就开始了了解之路。 2. electron 安装 electron是基于Chromium 和 Node.js 来构建一个跨平台应用的。所以首先要确保你的电脑上有node环境。 先从Github上将electron项目下载下来 1. git clone https://github.com/
Vue项目集成Electron打包为exe
weixin_48469176的博客
04-18 942
Vue项目集成Electron打包为exe
vue项目打包桌面应用 exe程序 以及打包为安装程序exe
cscscssjsp的博客
07-07 3468
需求： 一个vue项目打包放在windows系统 以桌面应用程序的方式打开。 准备： 1.electron ----- 可以在当前vue项目中 直接通过npm 安装 或者去官网git一个demo 官方demo地址：https://github.com/electron/electron-quick-start vue项目安装命令 npm install electron --save-dev //安装electron npm install electron-packager --save-.
【vue】electron打包exe
Rex的博客
09-08 1645
vue项目打包成exe可执行文件 在学习的过程中，发现关于 Electron ，常见的有两种打包方法： 将自己的 vue 项目打包，放到官方的 demo 文件中，改变打包路径 在自己的 vue 的项目中引入插件，然后打包 经过一番尝试，我决定采用第一种，原因是：特！别！简！单！ 下面详细介绍下第一种方法： 打包成exe可执行文件 1、把electron的官方例子扒下来，下面简称A，留着待用： git clone https://github.com/electron/electron-quick-sta
Electron-vue 关于图标的修改
mm_0123456789的博客
04-28 8643
electron-vue 图标 提示：图标包括：启动项目时桌面主题图标，窗口左上角图标，菜单栏图标，系统托盘图标，打包安装图标、开始菜单图标、快捷方式图标等。 文章目录electron-vue 图标1. 启动项目默认图标与窗口左上角图标2. 菜单栏图标3. 系统托盘图标4. 打包安装包图标5. 开始菜单图标和快捷方式图标总结 1. 启动项目默认图标与窗口左上角图标 这两个图标均由 mainWindow 的 icon 属性决定： 代码如下（示例）： mainWindow = new BrowserWi
Electron 更换窗口图标、exe执行文件图标
weixin_59685936的博客
09-24 2388
Electron 更换窗口图标、exe执行文件图标
electron 修改修改应用默认图标
九段刀客的博客
03-21 6962
1、安装生成icon图标依赖 npm install electron-icon-builder --save-dev 2、配置启动命令 "scripts": { "electron:generate-icons": "electron-icon-builder --input=./public/icon.png --output=build --flatten" }, 3、生成icon yarn electron:generate-icons 完成后会在根目录多出来一个build目录
electron 打包exe图标异常问题
naisi2422553065的博客
07-26 4995
electron打包exe图标异常 我们都知道 在使用electron 打包成exe的时候使用的是使用 ico 来打包 官方推荐大小是 256*256 但是我是我们应用的时候发现图标并不能正确的显示 如下: 为此我打开了electron的官方图标 用icoFX 打开一看 原来使用的 ico是类似于 俄罗斯套娃的存在 展开是 256*256 128*128 64*64 32*32 16*...
electron打包exe应用程序设置应用图标
hansen
11-19 5318
electron打包exe应用程序设置应用图标 1、复制下面代码到package.json即可 { "name": "FoxChat", "version": "1.0.0", "description": "", "main": "main.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "electron .", "build":
vue+electron 打包发布
myang147258的博客
07-14 2946
Electron是什么？Electron 是 GitHub 开发的一个开源框架，是网页应用 (web apps) 的一个原生包装层，它允许使用 Node.js（作为后端）和 Chromium（作为前端）完成桌面 GUI 应用程序的开发。Electron 可以用于构建具有 HTML、CSS、JavaScript 的跨平台桌面应用程序，它通过将 Chromium 和 node.js 合同一个运行的环境中来实现这一点，应用程序可以打包到 Mac、Windows 和 Linux 系统上。
vue项目打包成桌面应用并修改图标
欢迎来到我的博客！在这里，我将分享我在前端开发方面的知识和经验。让我们一起探索前端开发的无限可能！
05-15 6091
回去看文件夹有可能会多一个副本exe可以删除，看到之前修改的exe文件的图标没有变，其实已经变了，可以选择重新启动电脑打开就会看到变了，或者你心里想这个就是你要的那种，直接打包给别人，别人看到就是修改之后的。html文件实际上不用修改就可以直接使用，但是我用过其他方式打包发现可以修改html文件，以后就不用再打包文件重新生成桌面应用，所以我做了修改。npm run dist //打包项目为 exe 文件。打包给别人是压缩外面那个包给别人，不是直接给exe文件。package.json 内容。
electron+vue3 应用更换应用图标
weixin_43136717的博客
11-18 1706
electron+vue3 应用更换应用图标
electron桌面应用图标更改
qq_44741577的博客
03-19 3748
重新打包，安装后就是新图标了。完成后会在根目录多出来一个。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值