如何在Electron-Vue应用中设置应用程序图标？

你的当前配置 #

文件结构 #

main.ts 相关代码 #

const mainWindow = new BrowserWindow({
    height: 725,
    minHeight: 725,
    width: 1200,
    minWidth: 1200,
    icon: 'C://Users//Admin//Desktop//VueElectronTest-master//src//main//logo.ico',
    backgroundColor: '#000000',
    titleBarStyle: "hidden",
    titleBarOverlay: {
      color: '#000000',
      symbolColor: '#ffffff',
    },
    autoHideMenuBar: true,
    webPreferences: {
      preload: join(__dirname, 'preload.js'),
      nodeIntegration: false,
      contextIsolation: true,
    }
  });

解决方案 #

1. 开发阶段窗口图标优化 #

你当前已指定icon字段，但硬编码绝对路径会导致跨环境失效，建议用path模块结合相对路径处理：

import { join } from 'path';

const mainWindow = new BrowserWindow({
  // 保留其他配置...
  icon: join(__dirname, 'logo.ico'), // __dirname指向当前编译后的main代码目录，对应src/main路径
});

若需跨平台兼容，不同系统需对应图标格式，可通过系统判断加载：

import { join } from 'path';
import { platform } from 'os';

const getIconPath = () => {
  const baseDir = join(__dirname);
  switch (platform()) {
    case 'win32':
      return join(baseDir, 'logo.ico');
    case 'darwin':
      return join(baseDir, 'logo.icns');
    case 'linux':
      return join(baseDir, 'logo.png');
    default:
      return join(baseDir, 'logo.ico');
  }
};

const mainWindow = new BrowserWindow({
  // 保留其他配置...
  icon: getIconPath(),
});

2. 打包阶段应用图标配置 #

仅设置窗口图标无法修改打包后程序本身的图标，需根据打包工具配置：

若使用 electron-builder

在项目根目录package.json中添加build字段：

{
  "build": {
    "appId": "com.your.app.id",
    "win": {
      "icon": "src/main/logo.ico"
    },
    "mac": {
      "icon": "src/main/logo.icns"
    },
    "linux": {
      "icon": "src/main/logo.png"
    }
  }
}

若使用 electron-packager

打包时通过命令行参数指定图标：

electron-packager . YourAppName --icon=src/main/logo.ico --platform=win32 --arch=x64

注意事项 #

• 图标尺寸要求：Windows建议256x256的.ico，macOS需包含多尺寸的.icns，Linux建议512x512的.png
• 确保图标文件路径正确，打包工具可正常访问到对应文件

内容的提问来源于stack exchange，提问作者Baur