vue3+ts+vite 引入静态资源require报错 ——解决方案

 'require' is not defined 
官方示例

const imgUrl = new URL('./img.png', import.meta.url).href
document.getElementById('hero-img').src = imgUrl

解决方案：

/** vite的特殊性, 需要处理图片 */
const require = (imgPath: string) => {
  try {
    const handlePath = imgPath.replace('@', '..')
    console.log('handlePath::', imgPath)
    return new URL(handlePath, import.meta.url).href
  } catch (error) {
    console.warn(error)
  }
}

export { require }

引用

import { require } from '../utils/index.ts'


 {
    img: require_('@/assets/loginSwiper/slide1.webp'),
    id: 1
 },