使用Vue Router路由懒加载引发的生产页面白屏问题的解决方法
更新时间：2025年09月18日 08:33:37 作者：FarmerLiusun
这篇文章主要介绍了使用Vue Router 路由懒加载引发的生产页面白屏问题的原因和解决方法,并有相关的代码示例和图文供大家参考,需要的朋友可以参考下
1.项目技术栈
项目使用vue3 + Vue Router + ant-design-vue，构建工具使用 vite.
- 框架： vue3
- 组件库： andt-design-vue
- 路由： Vue Router
- 构建工具： vite
2.问题现象
- 1.本地开发阶段，一切正常没有任何问题。
- 2.通过nginx部署到开发环境后，访问该前端，其他所有功能均正常无任何问题。
- 3.当访问
/deviceMgmt/deviceLogQuery页面时，页面白屏，控制台无任何报错。
3.问题排查
刚看到这个问题还是挺懵的，自己本地开发环境没有问题，一部署到开发环境就出问题，而且还是没有任何报错、警告、提示。根据上面的现象，初步想到以下几个可能造成该问题的原因：
3.1 路径问题
- 前端访问的路径写错了
- 路由配置的路径跟组件的路径写错了
但是通过仔细对比发现，路由配置路径跟组件路径都没有任何问题，故排除了路径问题
3.1 路由配置问题
查看页面元素发现，访问/deviceMgmt/deviceLogQuery路径时，app容器内的组件为空。 并且之后发现之前部署的上一个前端版本是没有问题的，但是只要换成现在重新编译的版本就有这个问题。
通过git版本对比发现，原来是路由懒加载的配置写错了造成的
// router>index.js
const routes = [
{
name: 'deviceLogQuery',
path: '/deviceMgmt/deviceLogQuery',
//✅ 正确写法
// component: () => import('../views/deviceLogQuery/test.vue'),
// ❌ 错误写法
component: import('../views/deviceLogQuery/index.vue'),
}
]
路由配置中如果使用路由懒加载，呢组件的导入配置，component 是通过() => import(./MyPage.vue) 的方式导入。 这里少了 () => ，直接导入了。
4.问题解决
通过git版本对比发现，原来是路由懒加载的配置写错了
并且仔细查看控制台发现原来Vue Router 已经报警提示了：但是只在第一次加载才会报警告😰（自己没仔细看）
修改配置，重新打包部署，问题解决。
5.总结
- Vue Router 路由懒加载引发的生产页面白屏问题： 是由于路由懒加载的配置写错造成的
- 写代码的过程： 需要更加细致，原本是一个很小的问题，就是不够仔细才发生
- git的重要性： 一定要多提交代码，出现问题时才能更好的溯源
- 给Vue Router的建议： 建议直接将警告改成报错，并且增加提示
以上就是使用Vue Router路由懒加载引发的生产页面白屏问题的解决方法的详细内容，更多关于Vue Router懒加载引发页面白屏的资料请关注脚本之家其它相关文章！
相关文章
vite是VUE3创建项目的工具,项目大了之后,性能明显优于webpack,下面这篇文章主要给大家介绍了关于vite构建vue3项目的相关资料,需要的朋友可以参考下2023-01-01
在现代 web 应用程序中,图片预览功能提升了用户体验,使用户可以在上传图片之前查看图片内容,本文将详细介绍如何在 Vue.js 应用中实现图片预览功能,包括基本实现、进阶功能、与 Element UI 的集成、常见优化技巧以及与其他库的结合使用,需要的朋友可以参考下2024-09-09
这篇文章主要介绍了在vue项目中设置一些全局的公共样式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
这篇文章主要介绍了Vue3如何解决路由缓存问题(响应路由参数的变化),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要为大家介绍了Vue指令实现大屏元素分辨率适配详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
vue3-vite安装后main.ts文件和tsconfig.app.json文件报错解决办法
Vue.js是一个流行的JavaScript框架,它可以帮助开发者构建交互式Web应用程序,这篇文章主要给大家介绍了关于vue3-vite安装后main.ts文件和tsconfig.app.json文件报错解决办法,需要的朋友可以参考下2023-12-12
这篇文章主要介绍了vue项目登录成功拿到令牌跳转失败401无登录信息的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-02-02
这篇文章主要介绍了vue3+vite使用jsx和tsx详情，文章通过安装@vitejs/plugin-vue-jsx展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-05-05
这篇文章主要介绍了vue深度监听(监听对象和数组的改变)与立即执行监听实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
在Vue中最重要、最核心的概念之一就是响应式系统。这个系统使得Vue能够自动追踪数据变化，并在数据发生变化时自动更新相关的DOM元素。本文将会探讨Vue响应式系统的实现原理及其底层实现2023-03-03
最新评论