使用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的建议： 建议直接将警告改成报错，并且增加提示