当前位置: 首页 > Web前端 > HTML

Vue3+viteassets动态导入资源文件

时间:2023-03-28 13:38:00 HTML

之前vue2需要动态获取路径,使用require获取,但是在vue3中使用require会报requireisnotdefined错误。下面将详细讲解vue3中正确的动态获取路径的方式。require动态引入错误是因为require属于webpack方法方法一:适合处理多个资源文件推荐,该方法可以动态传入需要的文件路径底层原理:静态资源处理|vite官方中文文档newURL()+import.meta.url//获取图片路径constgetAssetsImage=(name:string)=>{returnnewURL(`/src/assets/newHome/${name}`,import.meta.url).href}方法二:引入图片路径参与编译(适用于单个资源文件)importimg1from'@/assets/newHome/img1.png'importimg2from'@/assets/newHome/img2.png'从'@/assets/newHome/img3.png'导入img3