vite+vue3+tsx项目打包后动态路由无法加载页面的问题及解决
作者：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')
}
}
});总结
到此结束战斗 !
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。