在使用electron+vue开发一个桌面应用，打包过程遇到坑，替换窗口的左上角图标让我搞了一天，网上说的什么格式或者路径问题都没对，最后在我将要放弃胡乱尝试之后居然成功了。

1、造成的原因

因为一开始打包过程参考了网上的一些打包文件配置，在package.json文件里面胡乱配置了一些参数，关于图标的配置也设置了（如下图1），一开始我以为在这里配置的图标是关于打包后生成exe文件的图标，所以就没管，但是仅在这里配置一下状态栏跟窗口的左上角图标还是electron默认图标，然后本人就以更改状态栏图标跟窗体左上角图标为目标去网上找参考案例，

网上都是说在创建窗口的时候配置icon属性，于是我就跟着教程来配置一遍了，一开始，我将图标放在build文件夹下面了，在开发环境下完全没问题，但是打包后问题来了，还是默认原来的图标，后来我突然想起放在build文件夹下是不经过打包流程（build文件夹是经过run build后生成的，我这里配置打包后的出口文件）于是我就将ico图标放在main下跟index.js同层路径下，满怀信心npm run dev 成功哈哈图标替换成功，然后npm run build,然后。。。（靠）左上角图标居然不显示，默认图标也没了，状态栏的图标是替换成功，到这里个人认为不会是图标的路径或者图标的格式问题，但是去网上找了半天全是说因为图标的格式或者图标的大小问题，于是没办法还是照着他们的方法来一遍（屁用都没有噢）还下载了个ico图标转换格式的软件（很垃圾）其实线上的图标格式转换足够了，并不是图标的格式或者图标大小的问题毕竟状态栏都显示了，而且我还用png的图片尝试过状态栏也是正常显示，唯独左上角的图标没换。

解决方案

在我即将下班没有耐心再搞的时候，脑子一抽，将package.json文件关于图标的配置删除然后，直接run build 哇塞居然成功显示图标，所以具体的方案是将关于打包配置的图标相关删除，然后直接在创建窗口的函数里面添加icon属性，注意一下图标放的路径，一定要放在能run build 的相关路径下

//窗口属性样式
  mainWindow = new BrowserWindow({
    height: height,
    width: width,
    useContentSize: true,
    icon:path.join(__dirname,'favicon.ico'), // icon
    webPreferences: {
      nodeIntegration: true,
      webSecurity:true
    }
  })