Electron Vite打包后，部分图标未显示的解决方案

---

背景

这个问题，弄了一晚上，头都大了，找了一堆博客也没解决。主要参考这个：https://blog.csdn.net/m0_73845616/article/details/129741099。
下面讲一下我的解决方案。

---

解决方案

上面链接里的方法，我采用第二、三个都没有解决。第一个也需要稍作改动才能用。

1. 第一个需要导入一个vue组件，图片用svg的话，直接将svg代码包裹在下面就行。
   
2. 在使用该图片的地方，import该组件后，再用<component :is="组件名"/>代替<img :src=""/>，这样使用，打出来的包是没问题的。
   
   以前设置图片，是用img+一个响应式的变量，这样打包后显示不出来。
   
   需要改成component+is的方式，这样is设置为一个相应式变量（一个组件），也能展示出图片，最后打包出来也没有问题。
   

---

原因分析

主要原因还是vite对打包后资源的路径进行了hash等操作，导致按照写死的字符串访问不到指定资源，静态设置的src没有问题，vite会改动相应的src原位置到相应的打包位置。但通过响应式动态设置的src，vite不会改动，最后就没有改资源的映射到路径，最后就找不到资源，无法展示。

---

后续更新

其实上面原因也已经说了，就是路径映射不上，资源开发路径和资源打包路径不同。
其实也可以这样使用，我们还是用svg而不是vue组件（这样好预览一点，毕竟vue组件也不是图片）。但是这个svg的路径呢，通过import导入，导入后的就是图片的路径（开发环境就是后面的路径，打包环境会自动映射到打包后的hash路径）。在使用使用也没问题了（更推荐这种方式）。

import ICHome from '@/assets/images/ic_home.svg'
import ICVideoProcessBack from '@/assets/images/ic_videoProcessBack.svg'
const icon = computed(() => {
  return props.isHomeIcon ? ICHome : ICVideoProcessBack
})

<template>
<img :src="icon" class="absolute no-select" style="left:0px;top:0px;" />
</template>