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 绑定使用 touchstart touchmove touchend解析

    vue 绑定使用 touchstart touchmove touchend解析

    这篇文章主要介绍了vue 绑定使用 touchstart touchmove touchend解析,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-03-03
  • Vue插槽原理与用法详解

    Vue插槽原理与用法详解

    这篇文章主要介绍了Vue插槽原理与用法,结合实例形式详细分析了vue.js插槽内容、具名插槽、作用域插槽等相关原理与使用方法,需要的朋友可以参考下
    2019-03-03
  • vue组件从开发到发布的实现步骤

    vue组件从开发到发布的实现步骤

    这篇文章主要介绍了vue组件从开发到发布的实现步骤,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • vue内置组件component--通过is属性动态渲染组件操作

    vue内置组件component--通过is属性动态渲染组件操作

    这篇文章主要介绍了vue内置组件component--通过is属性动态渲染组件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • vue实现在data里引入相对路径

    vue实现在data里引入相对路径

    这篇文章主要介绍了vue实现在data里引入相对路径,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-06-06
  • 基于elementUI竖向表格、和并列的案例

    基于elementUI竖向表格、和并列的案例

    这篇文章主要介绍了基于elementUI竖向表格、和并列的案例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • 15分钟上手vue3.0(小结)

    15分钟上手vue3.0(小结)

    这篇文章主要介绍了15分钟上手vue3.0,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-05-05
  • 五分钟教你使用vue-cli3创建项目(新手入门)

    五分钟教你使用vue-cli3创建项目(新手入门)

    本文主要介绍了五分钟教你使用vue-cli3创建项目,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • 详解vuex结合localstorage动态监听storage的变化

    详解vuex结合localstorage动态监听storage的变化

    这篇文章主要介绍了详解vuex结合localstorage动态监听storage的变化,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • vue3.0-props、computed、自定义事件方式

    vue3.0-props、computed、自定义事件方式

    这篇文章主要介绍了vue3.0-props、computed、自定义事件方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04

最新评论