electron打包之后托盘不见了

最新推荐文章于 2024-05-06 16:10:39 发布

吃炸鸡的前端

最新推荐文章于 2024-05-06 16:10:39 发布

阅读量1.2k

点赞数 5

分类专栏：项目问题文章标签： electron webpack node.js

本文链接：https://blog.csdn.net/weixin_43239880/article/details/129495602

版权

24 篇文章 2 订阅

订阅专栏

问题出现背景：使用electron-build打包导致了右下角的托盘不见了，可以看到有桌面运用在运行，但是里面显示的是一个空的图片。然后找了很多的博客和文章，发现都是随便粘贴的，最终经过自己的分析和吸收了N多文章之后才睬坑结束。因此，需要来记录一下，也希望能帮助到大家
在这里插入图片描述

问题成因分析 ：在我分析了很多文章和对比各种打包文件的不同之后，确定了一个原因：就是托盘使用的图片文件并没有被打包到electron文件中。

这是我之前的代码，在开发环境没有任何的问题。但是项目上线了，就发现图片加载不出来（这里有些博客说要是用绝对路径，但是还是不管用）
在这里插入图片描述

问题解决关键步骤：
a.electron-build打包配置静态文件夹
b.修改开发环境和生产环境上的图片路径

a.electron-build打包配置静态文件夹
将你的图片放置在与src同级目录public中
在package.json中增加electron-build打包配置，该配置的意思是将这个public文件夹在打包时不需要动它

"build": {
    "extraResources": [
      {
         "from": "./public", 
          "to": "./public"
     }
 }

在这里插入图片描述

最后运行electron-build的打包命令，看一下自己的图片存放位置为安装包同级目录的（resources/public）
在这里插入图片描述

b.修改开发环境和生产环境上的图片路径
这段代码主要意思是：在开发环境去加载public/logo.ico 在生产环境的时候去加载与.exe（就是安装包）统计目录的resources/public/logo.ico
在这里插入图片描述

理解： 下面可以看到我们把我们的安装包发给其他人安装之后，图片能在resources文件夹下找到,生产环境下，我们的托盘就是去加载这里面的图片

在这里插入图片描述

关注