vue3+vite assets动态引入资源文件

之前在Vue2中需要动态获取路径时，使用require来获取，但在vue3中使用require会报require is not defined的错，下面将详细讲解在vue3中正确的动态获取路径的方式。

require动态引入报错是因为require是属于webpack方法

方法一： 适用于处理多个资源文件

推荐，这种方式可以动态传入所需文件路径

底层原理：静态资源处理 | Vite 官方中文文档
new URL() + import.meta.url

// 获取图片路径

const getAssetsImage = (name: string) => {
  return new URL(`/src/assets/newHome/${name}`, import.meta.url).href
}

方法二： 引入图片路径参与编译（适用于单个资源文件）

import img1 from '@/assets/newHome/img1.png'
import img2 from '@/assets/newHome/img2.png'
import img3 from '@/assets/newHome/img3.png'