如何在Electron开发模式下修改任务管理器中的应用名称与图标

解决方案 #

Windows系统（开发模式） #

1. 修正进程名称
   开发模式下Electron默认以electron.exe运行，需手动设置进程标题，直接在主进程最顶部添加：

// 替换为你的应用产品名称
process.title = 'WebStack Deployer for Docker';

该设置会直接同步到任务管理器的进程名称列。

2. 统一AppUserModelId
   确保app.setAppUserModelId的值与package.json中的appId完全一致，避免系统识别冲突：

// 与package.json内的appId保持统一
app.setAppUserModelId('com.webstack.deployer4docker.app');

3. 进程图标临时处理
   Windows开发模式下的进程图标默认是Electron官方图标，若要替换，最简便的方式是用electron-builder快速打包一个开发测试包，运行打包后的exe文件，此时任务管理器会读取打包时配置的图标。

跨平台通用优化 #

• 确保app.name与package.json中的productName一致，且在app.on('ready')之前设置：

app.name = 'WebStack Deployer for Docker';

问题详情 #

需求 #

开发一款Electron应用，需确保应用名称和图标在以下位置正确显示：

• 任务管理器（Windows）
• 进程监视器
• 任务栏

当前配置 #

package.json内容：

{  
  "name": "webstack-deployer-for-docker",
  "productName": "WebStack Deployer for Docker",
  "appId": "com.webstack.deployer4docker.app",
  "version": "1.0.0",
  "main": "src/main.js",
  "icon": "src/assets/icons/icon.ico",
  "scripts": {
    "start": "electron src/main.js --trace-warnings",
    "build": "electron-builder"
  },
  "dependencies": {
    "electron-is-dev": "^3.0.1"
  },
  "devDependencies": {
    "electron": "^34.0.2",
    "electron-builder": "^24"
  },
  "build": {
    "appId": "com.webstack.deployer4docker.app",
    "productName": "WebStack Deployer for Docker",
    "win": {
      "target": "nsis",
      "icon": "src/assets/icons/icon.ico"
    },
    "mac": {
      "appId": "com.webstack.deployer",
      "target": "dmg",
      "icon": "src/assets/icons/icon.icns"
    }
  }
}

代码实现 #

主进程main.js相关代码：

const { app, BrowserWindow } = require('electron');
const path = require('path');

app.name = 'WebStack-Deployer-for-Docker';
app.setAppUserModelId('com.webstack.deployer');

if (process.platform === 'win32') {
    app.setUserTasks([
        {
            program: process.execPath,
            arguments: '',
            iconPath: path.join(__dirname, 'assets/icons/icon.ico'),
            iconIndex: 0,
            title: 'WebStack Deployer for Docker',
            description: 'Launch WebStack Deployer for Docker'
        }
    ]);
}

app.whenReady().then(() => {
    this.mainWindow = new BrowserWindow({
        width: 1200,
        height: 800,
        frame: false,
        icon: path.join(__dirname, '../assets/icons', process.platform === 'win32' ? 'icon.ico' : 'icon.icns'),
        webPreferences: {
            nodeIntegration: false,
            contextIsolation: true,
            preload: path.join(__dirname, '../preload.js')
        }
    });
});

问题现状 #

• 任务栏中应用名称和图标显示正常，但开发模式（执行yarn start）下，任务管理器和进程监视器的名称、图标未更新
• 生产构建后的安装包运行正常，但需要开发模式下也能正确显示对应信息

内容的提问来源于stack exchange，提问作者Francisco IA Lover