Electron应用图标的配置与生成

技术选型：

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: always
  installerIcon: 'build/icon.ico'
  uninstallerIcon: 'build/icon.ico'

installerIcon：配置安装包图标

uninstallerIcon：卸载命令图标

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

8. 编译打包：

npm run build:win

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