vite打包 动态图片引入 & 动态路由问题

1、动态引入图片资源 import.meta.url

//<img :src="`../assets/images/${imgName}.png`"/>

//改为=》

//<img :src="getImageUrl(imgName)"/>
//添加方法
getImageUrl(name) {
  return new URL(`../assets/images/${name}.png`, import.meta.url).href;
}

2、动态路由问题 import.meta.glob

const oRouter = {
    component: (resovle) => import("../views/page/" + viewName + ".vue").then(resovle),
    //...其他配置
}

//改为=>

//根据实际情况修改
//**/ 匹配任意多级路径如 /a/b/c/d
//*/ 仅可匹配一级路径如 /a
//*.vue 任何vue的文件
const modules = import.meta.glob("../views/**/*.vue");
const oRouter = {
    component: modules["../views/page/" + viewName + ".vue"],
    //...其他配置
}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章