我在学习用vue+electron builder写项目时遇到了一个问题，就是当我在打包前测试的时候能正常显示托盘栏图标，但是在打包后启动时显示托盘栏图标为空白，并且过了一会儿就自动消失了，但是程序仍在后台运行并没有退出。

        正常测试时为下图所示：

        当我打包后直接运行时则为下图所示：

        值得一提的是左侧箭头指向的任务栏图标为默认图标是因为没有配置，具体配置项待会一并展示。

        其实通过观察编译后的文件夹就可以观察出，打包的时候并没有将托盘栏图标打包进去，而想要将其打包进去只要在vue.config.js配置一下electronBuilder即可：

const { defineConfig } = require('@vue/cli-service')
const electronBuilder = require('electron-builder')//自己导入的
const path = require('path')//自己导入的
module.exports = defineConfig({
  transpileDependencies: true,
  //以下的配置是vue-cli-plugin-electron-builder的配置
  pluginOptions: {
    electronBuilder: {
      builderOptions: {
        //这部分是为了解决打包后的托盘栏图标不显示的问题
        //功能是将public文件夹下的img复制到打包后的文件夹下的public文件夹下
        extraResources: [
          {
            from: './public/img',
            to: './public/img',
          }
        ],
        //这部分的功能是配置打包后的安装包的名字，图标等
        win: {
          //这个就是配置任务栏图标的路径
          icon: path.join(__dirname, './public/img/icons/android-chrome-512x512.png'),
          target: [
            {
              target: 'nsis',
              arch: [
                'x64',
                'ia32'
              ]
            }
          ]
        },
      }
    }
  }
})

        这里我用的图标都是vue cli自动生成的public文件夹下的图片，如果想用自己的直接替换图片即可。配置完成后再次打包就可以正常显示了：

        此外有的人在执行yarn electron:build打包时可能会出现nsis因为电脑用户名为中文导致的如下错误

        这个问题的解决也很简单，只需要打开以下目录中的文件：

        你的项目/node_modules/app-builder-lib/out/targets/nsis/NsisTarget.js

        在NsisTarget.js这个文件中大约470行处添加这么一行代码即可解决用户名为中文导致的乱码问题。

args.push("-INPUTCHARSET", "UTF8");