手摸手教你vite + vue3 + tsx 项目打包后动态路由无法加载页面问题

今天在部署项目到服务器后,发现动态路由失效,测试开发环境时路由都可以正常跳转,生产环境控制台报错:

 原代码如下:

 查看了官方文档,并没有找到合适的方案,后百度查看了一些解决方案,但都没有解决实际问题,断断续续搞了好几天,终于解决了问题,解决方案如下:

1. 组件添加name名称

 2.动态添加路由的方法

// routerList:路由数据
// modules: 所有的组件文件
export const asyncRouteFile  = async (routeList:any,modules:any)=>{
    // 路由数据转化成平级
	let rs = handleRoutes(routeList)
	return new Promise(async (resolve, reject) => {
		   for (const key in modules) {
			if (Object.prototype.hasOwnProperty.call(modules, key)) {
				const e = modules[key];
				await e().then((mod:any) =>{
                   // mod.default?.name就是组件中的name名称
				   let r = rs.find((item:any) => item.component === mod.default?.name)
				   if (!r) return
                   // 匹配到组件之后添加路由
				   router.addRoute('Dashbord',{
					   path: r.path ,
					   name:r.component,
					   meta: r.meta,
					   component: mod.default  ,
				   });
				})
			}
		   }

		   resolve('成功')
	   })
}

 3.登录中使用

/* 登录之后的操作 */ 

//  获取路由
 let res  = await getRouters()      
 // 获取views下所有的.tsx结尾的文件(自行替换.vue或.js)
 const modules = import.meta.glob("../**.tsx")
 // 调用方法添加路由
 await asyncRouteFile(res.data.data,modules)

4.解决页面刷新之后路由失效问题

let flag = 0
router.beforeEach(async (to: any, from: any, next: any) => {
    const token = sessionStorage.getItem(SystemInfos.tokenHeader);
    if (token) {
        if (to.path === '/login') {
            next('/')
        } else {

            if (flag === 0) {
                flag++
                let res =  await getRouters()
                const modules = import.meta.glob("../**.tsx")
                await asyncRouteFile(res.data.data,modules)
                next({ path: to.path })
            } else {
                next()
            }
        }

    } else {
        if (to.path === '/login') {
            next()
        } else {
            next('/login')
        }

    }
});

到此结束战斗 !  希望对你有帮助 !