【Eelectron-vue】构建桌面应用（18）-electron打包应用时托盘图标错误

今天打算打成安装包发给测试部门做集成测试，本想偷个懒直接打包交给测试，但是大意失荆州。测试拿到安装文件，安装后执行程序，直接报错，程序直接就奔溃了，错误信息如下：

看到错误的时候也是蒙了一下。仔细查看了一下错误信息，应该是图片路径的错误。

我们知道在开发环境下的文件路径跟生产环境下是不一样的，需要我们在做产品打包发布时做额外的处理。

开发环境下，为了方便测试，我的图片都是跟主进程main/index.js放在同一路径下，都在src/main下，且运行无障碍，所以也没有注意。

查看了一下代码，是在创建托盘Tray，设置图片的时候产生的错误，我的代码如下：

tray = new Tray(path.join(__dirname, './logo-gray.png'))

于是搜了一下怎么设置图片的路径，网上的资料也不少，我也不知道他们有没有真正的成功，但是在我这里是不好用的。

我罗列了一下网上的解决办法：

1. 使用__dirname绝对路径处理图片相对路径的问题

tray = new Tray(path.join(__dirname,'./logo-gray.png'))

	这里的`template`指的是根路径，应该是项目名称的子目录

2. 使用__static处理绝对路径额问题

tray = new Tray(path.join(__static,'./logo-gray.png'))

但是无果，如果你仔细查看一下它的主进程index.js会发现，其中的路径定义如下：

if (process.env.NODE_ENV !== 'development') {
  global.__static = path.join(__dirname, '/static').replace(/\\/g, '\\\\')
}

这里的意思是：如果在非开发环境下也就是生产环境下，global.__static的指向是根目录下static文件，如果我们想要使用__static去处理路径的问题，那么你的托盘图片必须放到static文件目录下。

即将之前项目名/src/main中的图片放到项目名/static下，默认是没有这个文件夹的，需要我们在项目根目录下创建static文件夹，

然后将代码修改为

tray = new Tray(path.join(__static, './logo-gray.png'))

再次执行npm run build，打包后执行生成的exe程序，查看页面，运行正常，路径没有问题。

如果你怕麻烦，在开发环境和生产环境切换，需要不断地修改路径，那么你完全可以采用他们的方式来处理路径问题，这样就不需要来回改，还容易改出问题。

if (process.env.NODE_ENV !== 'development') {//生成环境
  tray = new Tray(path.join(__static, './logo-gray.png'))
} else {//研发环境
  tray = new Tray(path.join(__dirname, './logo-gray.png'))
}