Electron应用图标的配置与生成

2023-11-17

技术选型:

1、"electron": "21.3.3",

2、"electron-vite": "1.0.17"

3、"vue": "3.2.45"

4、"element-plus": "2.2.32"

背景:

默认情况下我们使用electron开发的应用使用的图标有四种类型:

  1. 软件的安装文件图标:

  1. 软件安装之后在桌面生成的图标:

  1. 软件打开之后在任务栏显示的图标:

  1. 软件打开之后左上角显示的图标:

那么在electron里面怎么设置这四种图标呢?

其实上面四种图标可以分为两类,1和2分为一类,叫安装包图标,3和4分为一类,软件运行时显示的图标,叫窗口图标

窗口图标的修改:

  1. 修改的文件:src\main\index.js

  1. 修改的文件内容,参考下面代码第八行,在BrowserWindow里面设置icon属性:

function createWindow() {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 1400,
    height: 800,
    show: false,
    autoHideMenuBar: true,
    icon: join(__dirname,'../../resources/image/3.png'),
    ...(process.platform === 'linux' ? { icon } : {}),
    webPreferences: {
      preload: join(__dirname, '../preload/index.js'),
      sandbox: false,
      nodeIntegration: true
    }
  })

安装包图标的修改

  1. 安装包图标的修改要比窗口图标修改困难的多

  1. 安装electron-icon-builder

npm i electron-icon-builder
  1. 在package.json的scripts中添加下面代码第11行代码:

  "scripts": {
    "format": "prettier --write .",
    "lint": "eslint . --ext .js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix",
    "start": "electron-vite preview",
    "dev": "electron-vite dev",
    "build": "electron-vite build",
    "postinstall": "electron-builder install-app-deps",
    "build:win": "npm run build && electron-builder --win --config",
    "build:mac": "npm run build && electron-builder --mac --config",
    "build:linux": "npm run build && electron-builder --linux --config",
    "electron:generate-icons":"electron-icon-builder --input=./resources/icon.png --output=build --flatten"
  }
  1. 将我们准备好的图片icon.png复制到resources目录下

  1. 执行生成icon命令:

npm run electron:generate-icons
  1. 命令执行之后在项目的build\icons目录下面生成许多icon:

  1. electron-builder.yml文件配置:

nsis:
  artifactName: ${name}-${version}-setup.${ext}
  shortcutName: ${productName}
  uninstallDisplayName: ${productName}
  createDesktopShortcut: always
  installerIcon: 'build/icon.ico'
  uninstallerIcon: 'build/icon.ico'

installerIcon:配置安装包图标

uninstallerIcon:卸载命令图标

(把步骤6里面的ico复制到build目录)

  1. 编译打包:

npm run build:win
  1. 在项目的dist目录下就生成对应的安装包:

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Electron应用图标的配置与生成 的相关文章

随机推荐

  • 容器适配器【stack、queue、priority_queue和反向迭代器】

    全文目录 适配器原理 stack 和 queue deque 模拟实现stack 模拟实现queue 模拟实现priority queue 反向迭代器 适配器原理 适配器 适配器是一种设计模式 设计模式是一套被反复使用的 多数人知晓的 经过
  • 如何延长周末体验感?工作与休息的完美平衡

    引言 对于工作繁忙的人们 周末是一段宝贵的时间 是放松身心 恢复精力的机会 然而 很多人常常发现 即使是在周末 也无法获得高质量的休息 本文将分享一些关于如何延长周末体验感 提升休息质量的方法 从时间规划 体验感提升以及充分休息几个方向进行
  • 如何借助 AI ,生成专属图标? #iconify AI

    不到一分钟 就可生成个性化专属图标 这款 AI 图标工具有多神奇 iconify AI 在几秒钟内为应用程序 网站创建专业图标 告别传统应用图标设计的麻烦和费用 让 AI 设计用户的专属品牌图标 图源 iconify AI 如何用 icon
  • 什么是防抖,节流? js实现核心代码,以及应用场景?

    防抖和节流都是用于项目优化的手段 用来限制事件的触发频率的两种常见技术 什么是防抖 在事件被触发后 等待一段时间 如果在这段时间内没有再次触发该事件 则执行相应的操作 如果在定时等待期间又触发的该事件 则重新计时 主要用于处理频繁触发的事件
  • GWO灰狼优化算法以及Matlab代码

    提示 文章写完后 目录可以自动生成 如何生成可参考右边的帮助文档 文章目录 GWO灰狼算法原理 进化更新 位置更新 紧随3只头狼 GWO灰狼算法流程图 GWO优化算法matlab代码 main函数 适应度函数 GWO主体代码 测试结果F1
  • 【Java小疑问】类和方法 前面添加public和不添加public的区别

    讨论前提 包的存在 Java 中修饰类修饰符 public default 默认 1 public 该类可在同一或不同包下访问 父包 子包皆可访问 2 default 该类仅可在同一个包下可访问 父包 子包皆无法访问 注意 在 Java 中
  • Linux下 (Ubuntu16.04 ) Tesseract4.0训练字库,提高正确识别率Linux下(合并字库)

    由于tesseract的中文语言包 chi sim 对中文手写字体或者环境比较复杂的图片 识别正确率不高 因此需要针对特定情况用自己的样本进行训练 提高识别率 通过训练 也可以形成自己的语言库 Linux和windows的系统方法一样 就是
  • 前端vue对接后端导出excel文件的原理和教程

    前言 前面我们讲过了前端怎么读取excel文件里面的内容数据问题 这边讲解前端怎么对接后端接口并导出excel文件 功能简单易实现 1 导出excel文件的原理 后端通过接口把文件流的数据返回给前端 前端再模拟一个下载的动作 进行文件数据的
  • 阿里云域名注册流程(全流程详细教程)

    阿里云域名注册流程很简单 先注册阿里云账号 账号必须通过实名认证 然后创建信息模版 个人或企业信息模板必须通过实名认证 然后想好域名名称和域名后缀 最后在阿里云域名注册官网进行新域名的注册 阿里云百科来详细说下阿里云域名注册流程 域名注册官
  • java 遍历String[]的常用两种方法

    初学java 在此记录 public static void main String args String str new String 3 for int i 0 i lt str length i str i i i 方法一 for循
  • Python3之爬虫----retrying模块的使用和处理cookie相关的请求

    1 1 设使用超时参数 requests get url headers headers timeout 3 设置超时参数 若url在三秒内未得到响应 报错 1 2 retrying模块的使用 第三方模块 from retrying imp
  • Tank大战游戏模拟(java版)

    Java小项目 坦克大战 1 任务分析 玩家进入游戏 通过操纵坦克来守卫基地 摧毁全部敌方坦克来取得胜利 如果基地被摧毁 或者玩家坦克被摧毁 则判定游戏失败 2 具体分析 图形用户界面使用GUI技术实现 游戏中坦克的方向转动可以通过四种不同
  • node.js 详解

    目录 一 初始node js 1 为什么 JavaScript 可以在浏览器中被执行 2 node js 简介 3 node js 查看是否安装 4 运行文件 1 在终端中输入 node 文件 2 终端中的快捷键 二 fs 文件系统模块 1
  • Python爬虫学习笔记(十)————Scrapy

    目录 1 scrapy是什么 2 安装scrapy 3 scrapy项目的创建以及运行 1 创建scrapy项目 2 项目组成 3 创建爬虫文件 跳转到spiders文件夹中去创建爬虫文件 scrapy genspider爬虫文件的名字 网
  • SSL证书的作用,可以帮助网站达到什么样的效果

    近年来 企业建站非常普遍 出现了各类网站 随着互联网的发展 网络安全威胁事件也频繁发生 网站入侵 钓鱼网站等这些问题 不仅容易影响了企业的声誉 也会造成了用户的损失 那么如何保护网站数据的安全 让用户甄别出真假网站 我们可以使用SSL证书来
  • Blender建模汇总

    好消息是UE4官方正在完善UE4和Blender之间的工作流 在此之前还是建议扎实打好基础 建模方法基本上是之前总结的 利用插件或利用面片的方式 区别在于资源管理 不再滥用表面细分修改器 1 光剑 未应用修改器 可用于游戏模型 应用修改器后
  • 模块 ““element-plus““ 没有导出的成员 xxx。你是想改用 “import xxx from “element-plus““ 吗?

    项目场景 项目 vue3 ts element plus 很多时候导入element plus中某个api时 总是提示 模块 element plus 没有导出的成员 xxx 你是想改用 import xxx from element pl
  • 头歌:图像识别案例在线实验闯关

    第2关 基于全像素特征的手写体图像识别模型 任务描述 对图像像素数据集和图像标签数据集 按80 训练和20 测试进行随机划分 构建支持向量机分类模型 输出模型的准确率和测试集的预测准确率 编程要求 根据提示 在右侧编辑器补充代码 按照任务要
  • 解决Python中的PermissionError: Permission denied问题

    解决Python中的PermissionError Permission denied问题 在Python编程中 我们时常会遇到PermissionError Permission denied异常错误 这个错误通常出现在我们尝试访问或修改
  • Electron应用图标的配置与生成

    技术选型 1 electron 21 3 3 2 electron vite 1 0 17 3 vue 3 2 45 4 element plus 2 2 32 背景 默认情况下我们使用electron开发的应用使用的图标有四种类型 软件的