问题描述:
本地npm run dev,路由加载正常,打包后,预览npm run preview时,就会出现下面问题
解决:
在整理路由的位置引入
const modules = import.meta.glob("../views/**/**.vue");
这是后端返回的菜单
const menuList = [
{
name: 'deviceManage',
label: '设备管理',
icon: 'location',
children:[
{
path: '/deviceManage/device-list',
label: '设备列表',
name: 'device-list',
},
{
path: '/deviceManage/device-analysis',
label: '统计分析',
name: 'device-analysis',
}
]
},
]
整理为需要的动态路由: 使用引入的 modules
component: modules[`../views${childItem.path}.vue`]
menu.forEach(menuItem => {
const parentItem = {
path: menuItem.path, // 你的路径
component: () => import('@/views/Main.vue'), // 你的组件路径
name: menuItem.name,
meta: { title: menuItem.label },
children: [],
};
menuItem.children.forEach(childItem => {
let childUrl = `/src/views${childItem.path}.vue`
console.log('childUrl',childUrl);
const childRoute = {
path: childItem.path,
name: childItem.name,
meta: { title: childItem.label },
component: modules[`../views${childItem.path}.vue`]
};
parentItem.children.push(childRoute);
list.push(parentItem);
});
});
list.forEach(item => {
router.addRoute(item)
})
查看当前的路由列表
console.log('查看路由列表',router.getRoutes())