技术选型：

1、"electron": "21.3.3",

2、"electron-vite": "1.0.17"

3、"vue": "3.2.45"

4、"element-plus": "2.2.32"

背景：

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

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

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

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

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

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

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

窗口图标的修改：

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

2. 修改的文件内容，参考下面代码第八行，在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. 安装包图标的修改要比窗口图标修改困难的多

2. 安装electron-icon-builder

npm i electron-icon-builder

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

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

5. 执行生成icon命令：

npm run electron:generate-icons

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

7. electron-builder.yml文件配置：

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

installerIcon：配置安装包图标

uninstallerIcon：卸载命令图标

（把步骤6里面的ico复制到build目录）

8. 编译打包：

npm run build:win

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