electron-builder在linux系统（统信UOS），icon图标配置不生效

Question

用的是vue-cli-plugin-electron-builder插件，内部是electron-builder
如下图两个配置文件所示，window环境下完全没问题，icon图标可以正常显示
而在linux配置那写了icon: "./public/images/macorlinux/xffz-512x512.png",因为官方说了要带尺寸，所以我觉得这样写是没问题的,但却困难重重

package.json

{
  "name": "electron-vue",
  "version": "0.1.0",
  "private": true,
  "author":"ibiz <[e-mail]>",
  "homepage": "https://www.baidu.com",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "electron:build": "vue-cli-service electron:build",
    "electron:serve": "vue-cli-service electron:serve",
    "postinstall": "electron-builder install-app-deps",
    "postuninstall": "electron-builder install-app-deps",
    "electron:arm-build": "export USE_SYSTEM_FPM='true' && vue-cli-service electron:build",
    "electron:qilin-build": "export ELECTRON_BUILDER_BINARIES_MIRROR=https://mirrors.huaweicloud.com/electron-builder-binaries/ && vue-cli-service electron:build"    
  },
  "main": "background.js",
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11",
    "vue-class-component": "^7.2.3",
    "vue-property-decorator": "^9.1.2",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0"
  },
  "devDependencies": {
    "@types/electron-devtools-installer": "^2.2.0",
    "@typescript-eslint/eslint-plugin": "^4.18.0",
    "@typescript-eslint/parser": "^4.18.0",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/eslint-config-typescript": "^7.0.0",
    "electron": "^13.0.0",
    "electron-devtools-installer": "^3.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "less": "^3.0.4",
    "less-loader": "^5.0.0",
    "typescript": "~4.1.5",
    "vue-cli-plugin-electron-builder": "~2.1.1",
    "vue-template-compiler": "^2.6.11"
  }
}

vue.config.js

const productName = '应用名称';

module.exports = {
  publicPath: "./",
  devServer: {
    host: "0.0.0.0",
    port: 8080,
  },
  pages: {
    index: {
      entry: "src/renderer/main.ts",
      template: "public/index.html",
      filename: "index.html",
      title: "vue-cli-electron",
      chunks: ["chunk-vendors", "chunk-common", "index"],
    },
    // loader: 'src/loader/main.ts' // 多页loader页
  },
  pluginOptions: {
    electronBuilder: {
      nodeIntegration: true, // 渲染进程可以使用node模块
      mainProcessFile: "src/main/index.ts", // 主进程入口文件
      mainProcessWatch: ["src/main"], // 检测主进程文件在更改时将重新编译主进程并重新启动
      builderOptions: {
        asar: false,
        productName: `${productName}`, // 项目名,这也是生成的exe文件的前缀名
        appId: "com.electron.template", // 应用程序id
        copyright: "Copyright © template", // 应用程序版权行
        directories: {
          output: "dist_electron", // 打包输出的目录，相对于项目根路径
        },
        win: {
          legalTrademarks: "Copyright © template", // 商标注册
          publisherName: "electron", // 发行者名称，与代码签名证书中的名称完全相同
          requestedExecutionLevel: "highestAvailable", // 应用程序请求执行的安全级别。
          verifyUpdateCodeSignature: false, // 禁用更新签名
          target: [
            {
              target: "nsis", // 目标包类型
            },
          ],
          // 没有配置 nsis 的时候的安装包名，此配置项会被 nsis 覆盖
          // artifactName: `${productName}.exe`,
          icon: "./public/images/xffz.ico", // 图标路径，安装包和免安装程序都会应用
        },
        linux: {
          target: ["deb"],
          artifactName: `${productName}.dmg`,
          icon: "./public/images/macorlinux/xffz-512x512.png"
        },
        deb: {
          artifactName: `${productName}`,
        },
        nsis: {
          // 创建一键安装程序还是辅助安装程序
          oneClick: false,
          // 是否允许用户更改安装目录。
          allowToChangeInstallationDirectory: true,
          // 是否为辅助安装程序显示安装模式安装程序页(选择每台计算机或每用户)。或者是否总是按所有用户(每台机器)安装
          perMachine: true,
          // 允许申请提升。如果为false，用户将不得不以提升的权限重启安装程序
          allowElevation: true,
          // 打出的安装包名称，默认 ${productName} Setup ${version}.${ext}，${productName} 对应productName 或 package.json 中的name， ${version}对应 package.json 中的 version
          artifactName: `${productName}-V${"1.0.0"}.exe`,
          // 完成后是否运行已安装的应用程序。对于辅助安装程序，相应的复选框将被删除
          runAfterFinish: true,
          // 用于所有快捷方式的名称。默认为应用程序名称，即 productName 的值，如果 productName 没有设置，则默认是 package.json 中的 name，如果name 也没有设置，将报错
          shortcutName: `${productName}`,
          include: './public/installer.nsh',          
        },
        publish: [
          {
            provider: "generic",
            url: "http://172.16.103.13:8000",
          },
        ],
      },
    },
  },
};

文件夹目录

打出来的包

但是不管我用什么方法，哪怕是建一个build文件夹里面放一张icon.png,或者是mac格式的icns（据说会默认根据icns格式生成图表）……等方法，它的应用图表还是默认的electron图标，请问这种情况如何处理？有彦祖懂么？
多说一句，系统是统信UOS的，maybe系统问题？

就是下方这个图标！！

Answer 1

我没弄错的话 Linux （大部分环境）下桌面图标其实都是在一个 .desktop 配置文件里指定的，参见Desktop Entry Specification。

我对 electron 打包 Linux 的情况不清楚，但建议是如果你打包的软件打算是给 Linux 环境用的话，可以注意找下有没有生成 .desktop 文件（个人猜测是没有的），有的话看看里面的 icon 对不对，没有的话自己写一个。

按我以往给Linux环境打包的经验看很可能还是要自己写的，最终打包deb/rpm的时候把.desktop和图标之类的东西带上即可。

Answer 2

参照@weak_ptr 的回答
注意到有这个配置项
按照这个配置可以生成一个linux系统的.desktop文件
类似这样，把icon指向linux里图标生成的位置

        linux: {
          target: ["deb"],
          artifactName: `${productName}.dmg`,
          icon: "./build/icons",
          desktop:{
            Icon:"/usr/share/icons/hicolor/512x512/apps/electron-vue.png"
          }
        },

Answer 3

你打包出来的到底是啥？AppImage? deb/rpm/pacman 这一类的软件包？tar.gz这种纯二进制压缩包？还是其他？

对于最后一种效果类似于windows下的便携版，肯定是不会有什么图标的，得自己处理。AppImage需要安装libappimage才能显示出来bundle在AppImage中的icon。对于软件包一般会给你bundle一个desktop文件，你看看desktop文件中写的图标名是啥，根据这个名字重命名你的文件就行了。 https://www.electron.build/ic... 还有这个icon路径是有要求的

Answer 4

https://github.com/electron-userland/electron-builder/issues/2654#issuecomment-369982772

linux端有权限问题，看看是不是这个原因

Answer 5

我再build/icons文件夹下放了多个分辨率的图标文件，比如

16x16.png
32x32.png
...
512x512.png
icon.png

生成的deb包安装后，成功显示图标了