使用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版本对比发现，原来是路由懒加载的配置写错了造成的
js
// 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的建议： 建议直接将警告改成报错，并且增加提示