Electron系列 -- 打包后底部托盘图标丢失

一. 桌面应用图标默认图标,更改为自定义图标

electron-icon-builder 是一个生成图标的包

安装 electron-icon-builder 

npm install electron-icon-builder --save-dev

package.json 中配置命令 

"scripts": {
  "electron:generate-icons": "electron-icon-builder --input=./public/favicon.png --output=build --flatten"
},

 执行命令, 生成icon

npm run electron:generate-icons

完成后会在根目录多出来一个build目录 

 

在vue.config.js 中, 也要将路径进行调整 ./build/icons/icon.ico

删除原来的dist_electron，重新打包，安装后就是新图标了

二. 托盘图标丢失

• windows系统中icon需要256*256格式图片，更换应用图标亦在此处
• 通过在vue.config.js中单独配置512x512.png的图片可以解决
• 在win内加入  icon: path.join(__dirname, "./public/512x512.png")

 

// 第三方插件配置
  pluginOptions: {
    // vue-cli-plugin-electron-builder 配置
    electronBuilder: {
      builderOptions: {
        // 设置打包之后的应用名称
        productName: 'xxx收银系统',
        nsis: {
            // 是否一键安装
            oneClick: false,
            // 允许请求提升。 如果为false，则用户必须使用提升的权限重新启动安装程序。
            allowElevation: true,
            // 是否允许用户改变安装目录
            allowToChangeInstallationDirectory: true,
            // 安装图标
            installerIcon: './build/icons/icon.ico',
            // 卸载图标
            uninstallerIcon: './build/icons/icon.ico',
            // 安装时头部图标
            installerHeaderIcon: ' ./build/icons/icon.ico',
            // 创建桌面图标
            createDesktopShortcut: true,
            // 创建开始菜单图标
            createStartMenuShortcut: true
          },
          win: {
            //这个就是配置任务栏图标的路径
            // icon: "./build/icons/icon.ico", // 旧的写法
            icon: path.join(__dirname, "./public/512x512.png"), //新的写法
            requestedExecutionLevel: "highestAvailable",
            target: [
                {
                target: "nsis",
                arch: ["x64"],
                },
            ],
           },
       }
     }
    }

 效果展示 前后对比

重新打包项目后, 托盘图标已显示 

 

三. 修改系统通知的应用包名

打包之后的应用，在测试系统通知时展示 的是包名

在background.js 中加入即可

app.setAppUserModelId('xxx收银系统'')