关于前端:vue3vite-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'