vite+vue3+tsx項目打包后動態(tài)路由無法加載頁面的問題及解決

更新時間：2024年03月15日 11:04:03 作者：coder丘山

這篇文章主要介紹了vite+vue3+tsx項目打包后動態(tài)路由無法加載頁面的問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

vite+vue3+tsx打包后動態(tài)路由無法加載頁面

在部署項目到服務器后，發(fā)現(xiàn)動態(tài)路由失效，測試開發(fā)環(huán)境時路由都可以正常跳轉

生產環(huán)境控制臺報錯

原代碼

如下：

查看了官方文檔，并沒有找到合適的方案，后百度查看了一些解決方案，但都沒有解決實際問題

斷斷續(xù)續(xù)搞了好幾天，終于解決了問題

解決方案

1. 組件添加name名稱

2.動態(tài)添加路由的方法

 
// routerList:路由數(shù)據(jù)
// modules: 所有的組件文件
export const asyncRouteFile  = async (routeList:any,modules:any)=>{
    // 路由數(shù)據(jù)轉化成平級
	let rs = handleRoutes(routeList)
	return new Promise<string>(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')
        }
 
    }
});