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"],
    //...其他配置
}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章