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项目中使用md5加密的方法

    在vue项目中使用md5加密的方法

    这篇文章主要介绍了在vue项目中使用md5加密的方法,需要的朋友可以参考下
    2018-09-09
  • 使用Webstorm调试Vue代码详细图文教程

    使用Webstorm调试Vue代码详细图文教程

    WebStorm是一款优秀的前端开发IDE,之前一直可以调试Vue项目,下面这篇文章主要给大家介绍了关于使用Webstorm调试Vue代码的详细图文教程,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2024-05-05
  • vue-admin-template模板添加tagsview的实现

    vue-admin-template模板添加tagsview的实现

    本文主要介绍了vue-admin-template模板添加tagsview的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-04-04
  • vue3如何直接修改reactive定义的变量

    vue3如何直接修改reactive定义的变量

    这篇文章主要介绍了vue3如何直接修改reactive定义的变量问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-05-05
  • vue $set 给数据赋值的实例

    vue $set 给数据赋值的实例

    今天小编就为大家分享一篇vue $set 给数据赋值的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • Vue中父子组件通讯之todolist组件功能开发

    Vue中父子组件通讯之todolist组件功能开发

    这篇文章主要介绍了Vue中父子组件通讯——todolist组件功能开发的相关知识,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-05-05
  • vue+element ui el-tooltip动态显示隐藏问题

    vue+element ui el-tooltip动态显示隐藏问题

    这篇文章主要介绍了vue+element ui el-tooltip动态显示隐藏问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • Vue路由this.route.push跳转页面不刷新的解决方案

    Vue路由this.route.push跳转页面不刷新的解决方案

    这篇文章主要介绍了Vue路由this.route.push跳转页面不刷新的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2021-07-07
  • elementUI自定义上传文件功能实现(前端后端超详细过程)

    elementUI自定义上传文件功能实现(前端后端超详细过程)

    自定义上传思路很简单,下面这篇文章主要给大家介绍了关于elementUI自定义上传文件功能实现(前端后端超详细过程)的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-11-11
  • vue3+ts+vite使用el-table表格渲染记录重复情况

    vue3+ts+vite使用el-table表格渲染记录重复情况

    这篇文章主要给大家介绍了关于vue3+ts+vite使用el-table表格渲染记录重复情况的相关资料,我们可以通过合并渲染、数据缓存或虚拟化等技术来减少重复渲染的次数,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-12-12

最新评论