問題描述
在本地開發(fā)環(huán)境中頁(yè)面都能動(dòng)態(tài)加載僻孝，但是執(zhí)行打包命令后，產(chǎn)生了點(diǎn)擊路由控制臺(tái)輸出找不到頁(yè)面的報(bào)錯(cuò)
component: () => import(/* @vite-ignore */`/src/views${item__.pageName}.vue`)
多次嘗試修改引入文件路徑發(fā)現(xiàn)并不能生效皿桑，于是看了一下vite的官方文檔
, 發(fā)現(xiàn)vite升級(jí)到2.0的版本后, 多出一個(gè)方法,import.meta.glob, 可以動(dòng)態(tài)引入路由名党，于是嘗試這種方法
//加載views下面的所有vue和tsx的文件
const modules = import.meta.glob('../../views/**/*.{vue,tsx}')
//匹配路由，將本地模塊返回截酷，此處搬運(yùn)了vben的官方寫法
function dynamicImport(
dynamicViewsModules: Record<string, () => Promise<Recordable>>,
component: string,
) {
const keys = Object.keys(dynamicViewsModules)
const matchKeys = keys.filter((key) => {
const k = key.replace('../../views', '')
const startFlag = component.startsWith('/')
const endFlag = component.endsWith('.vue') || component.endsWith('.tsx')
const startIndex = startFlag ? 0 : 1
const lastIndex = endFlag ? k.length : k.lastIndexOf('.')
return k.substring(startIndex, lastIndex) === component
})
if (matchKeys?.length === 1) {
const matchKey = matchKeys[0]
return dynamicViewsModules[matchKey]
} else {
warn('在src/views/下找不到`' + component + '.vue` 或 `' + component + '.tsx`, 請(qǐng)自行創(chuàng)建!')
return EXCEPTION_COMPONENT
}
}
//根據(jù)后端的路由地址跟本地模塊匹配，設(shè)置本地路由
let current = dynamicImport(modules,item.url)
component = current
//....
router.push({
//....
component,
})
此時(shí)本地能正常運(yùn)行乾戏，打包后也能正常請(qǐng)求到界面迂苛。
