手摸手教你vite + vue3 + tsx 项目打包后动态路由无法加载页面问题

最新推荐文章于 2025-05-29 12:29:37 发布

coder丘山

最新推荐文章于 2025-05-29 12:29:37 发布

阅读量5k

点赞数 2

CC 4.0 BY-SA版权

文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_58115275/article/details/126769498

本文记录了一位开发者在部署Vue项目到服务器后遇到动态路由失效的问题，经过多日研究，最终找到了解决方案。主要步骤包括为组件添加name属性，动态添加路由的方法，以及在路由守卫中处理登录后的路由加载。此外，还解决了页面刷新后路由失效的难题。通过这些方法，成功地使动态路由在生产环境中正常工作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天在部署项目到服务器后,发现动态路由失效,测试开发环境时路由都可以正常跳转,生产环境控制台报错:

原代码如下:

查看了官方文档,并没有找到合适的方案,后百度查看了一些解决方案,但都没有解决实际问题,断断续续搞了好几天,终于解决了问题,解决方案如下:

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(