Vite找不到静态资源

在vue模版中不能直接使用下面这种写法引入静态资源, 因为vite不会自动对其中的路径做处理. 其中path是一个静态资源路径如: '/assets/hh.jpg', 不是通过import引入的资源.

<div :style="{ backgroundImage: 'url(' + path+ ')' }">

Vite会自动转换静态资源路径的几种情况:
1、CSS中的静态资源路径
2、img中的src
3、import() 语句引入的静态资源
4、URL

要解决上面模版中静态资源找不到的问题,
1、将静态资源放置于public目录中, vite不会对public目录下资源做处理, 因此还能引用到. 但是这会导致文件指纹(vite生成的文件hash后缀)消失
2、使用import() 动态引入资源

function handleChange(val) {
    import(`./assets/${val}.jpg`).then(res => {
        path.value = res.default
    })
}

但是如果path比较多, 这种方法会打包生成多个文件, handleChange时候会触发请求
3、使用URL

function handleChange(val) {
    const url = new URL('./assets/${val}.jpg', import.meta.url) 
    path.value = url
}

import.meta.url指 的是当前模块的路径, 这种方法, 打包结果不会生成多个文件, 文件指纹也不会丢失.