vite+vue3+tsx项目打包后动态路由无法加载页面的问题及解决

 更新时间:2024年03月15日 11:04:03   作者:coder丘山  
这篇文章主要介绍了vite+vue3+tsx项目打包后动态路由无法加载页面的问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vite+vue3+tsx打包后动态路由无法加载页面

在部署项目到服务器后,发现动态路由失效,测试开发环境时路由都可以正常跳转

生产环境控制台报错

原代码

如下:

查看了官方文档,并没有找到合适的方案,后百度查看了一些解决方案,但都没有解决实际问题

断断续续搞了好几天,终于解决了问题

解决方案

1. 组件添加name名称

2.动态添加路由的方法

 
// routerList:路由数据
// modules: 所有的组件文件
export const asyncRouteFile  = async (routeList:any,modules:any)=>{
    // 路由数据转化成平级
	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')
        }
 
    }
});

总结

到此结束战斗 !  

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 开发Vue树形组件的示例代码

    开发Vue树形组件的示例代码

    本篇文章主要介绍了开发Vue树形组件的示例代码,它展现了组件的递归使用。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • vue使用urlEncode问题

    vue使用urlEncode问题

    这篇文章主要介绍了vue使用urlEncode问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • Vue组件设计之多列表拖拽交换排序功能实现

    Vue组件设计之多列表拖拽交换排序功能实现

    这篇文章主要介绍了Vue组件设计之多列表拖拽交换排序,常见的场景有单列表拖拽排序,多列表拖拽交换排序,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-05-05
  • 如何在Vue.JS中使用图标组件

    如何在Vue.JS中使用图标组件

    这篇文章主要介绍了如何在Vue.JS中使用图标组件,文中讲解非常细致,代码帮助大家更好的理解和学习,感兴趣的朋友可以了解下
    2020-08-08
  • Vue中比较流行且好用的组件使用示例

    Vue中比较流行且好用的组件使用示例

    这篇文章主要介绍了Vue中比较流行且好用的一些组件使用示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08
  • Vue左滑组件slider使用详解

    Vue左滑组件slider使用详解

    这篇文章主要为大家详细介绍了Vue左滑组件slider的使用,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-08-08
  • Vue3 + MybatisPlus实现批量删除功能(详细代码)

    Vue3 + MybatisPlus实现批量删除功能(详细代码)

    这篇文章主要介绍了Vue3 + MybatisPlus实现批量删除功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2024-03-03
  • Vue如何使用百度地图自定义信息窗口InfoWindow的样式

    Vue如何使用百度地图自定义信息窗口InfoWindow的样式

    这篇文章主要介绍了Vue如何使用百度地图自定义信息窗口InfoWindow的样式问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • vue-cli 为项目设置别名的方法

    vue-cli 为项目设置别名的方法

    这篇文章主要介绍了vue-cli 为项目设置别名的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10
  • Vue-cli 移动端布局和动画使用详解

    Vue-cli 移动端布局和动画使用详解

    这篇文章主要介绍了Vue-cli和移动端布局和动画使用详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08

最新评论