vue3 + vite动态路由打包404,找不到路由

问题描述:

本地npm run dev,路由加载正常,打包后,预览npm run preview时,就会出现下面问题

解决:

构建生产版本 | Vite 官方中文文档

在整理路由的位置引入

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())

  • 3
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值