vue3 + vite2在项目实践问题

1. 多个本地图片在项目中需要动态引入vite官网提供的 import 代码实例：

import imgUrl from './img.png'
document.getElementById('hero-img').src = imgUrl

这种方式明显不是特别好用 每个图片都需要import ，也不利于循环。

vite官网除了提供了import 动态引入方法还提供了 new URL()

function getImageUrl(name) {
  return new URL(`./dir/${name}.png`, import.meta.url).href
}

这种方法在开发模式下是没有任何问题的，不过在build之后assets文件夹的名称后面会动态加上hash的所以这个时候就会出现文件夹名称不对应的情况报404。

最后为了项目上线我把需要动态加载的本地图片放在了public文件夹下

 <img :src="`/${bgIconList[val.key]}.svg`" />

不过直接把图片放到public里面感觉有点不符合规范。

后来项目上线后想到了别名webpack里resolve.alias 的方式，不过在vite的文档里没有找到对应的配置写法，急上线的项目就没有去尝试。

希望得到大家更好的解决方法，并希望大家提出自己在使用vue3+vite 所遇到的问题