问题描述
在本地开发环境中页面都能动态加载，但是执行打包命令后，产生了点击路由控制台输出找不到页面的报错
component: () => import(/* @vite-ignore */`/src/views${item__.pageName}.vue`)
多次尝试修改引入文件路径发现并不能生效，于是看了一下vite的官方文档
, 发现vite升级到2.0的版本后, 多出一个方法,import.meta.glob, 可以动态引入路由，于是尝试这种方法
//加载views下面的所有vue和tsx的文件
const modules = import.meta.glob('../../views/**/*.{vue,tsx}')
//匹配路由，将本地模块返回，此处搬运了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`, 请自行创建!')
return EXCEPTION_COMPONENT
}
}
//根据后端的路由地址跟本地模块匹配，设置本地路由
let current = dynamicImport(modules,item.url)
component = current
//....
router.push({
//....
component,
})
此时本地能正常运行，打包后也能正常请求到界面。
