Electron应用图标的配置与生成

2024-01-03 09:14| 来源: 网络整理| 查看: 265

技术选型：

1、"electron": "21.3.3",

2、"electron-vite": "1.0.17"

3、"vue": "3.2.45"

4、"element-plus": "2.2.32"

背景：

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

软件的安装文件图标：

软件安装之后在桌面生成的图标：

软件打开之后在任务栏显示的图标：

软件打开之后左上角显示的图标：

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

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

窗口图标的修改：

修改的文件：src\main\index.js

修改的文件内容，参考下面代码第八行，在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 } })

安装包图标的修改

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

安装electron-icon-builder

npm i electron-icon-builder

在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" }

将我们准备好的图片icon.png复制到resources目录下

执行生成icon命令：

npm run electron:generate-icons

命令执行之后在项目的build\icons目录下面生成许多icon：

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目录）

编译打包：

npm run build:win

在项目的dist目录下就生成对应的安装包：

【本文地址】

公司简介

联系我们