面试题：Vue CLI 构建项目时白屏，如何深入调试排查

Question

基于 Vue CLI 构建的 Vue 项目，在页面加载时出现白屏现象，控制台无明显报错信息。请详细描述你会从哪些方面入手进行深入调试，包括涉及到的工具、排查思路等。

Answer 1

1. 检查网络请求

• 排查思路：确认是否因资源（如 JavaScript、CSS、图片等）加载失败导致白屏。检查是否存在跨域问题，服务器端是否正常响应。
• 工具：浏览器开发者工具中的 Network 面板，查看资源请求状态码，若为 404 则资源未找到，若为 500 等服务器错误码需检查服务器端。还可以使用抓包工具如 Charles 辅助分析网络请求。

2. 检查 Vue 组件渲染

• 排查思路：从入口组件开始，逐步检查组件树，确认是否有组件的渲染逻辑错误，如条件渲染导致组件未正常显示，或者组件内部数据获取异常影响渲染。
• 工具：在组件内使用 console.log 打印关键数据和渲染流程中的关键步骤。也可以使用 Vue Devtools 插件，它能清晰展示组件树结构、组件状态和 props 传递，方便定位组件相关问题。

3. 检查路由配置

• 排查思路：若项目使用路由，确认路由配置是否正确。是否存在路由跳转错误，或者默认路由未正确设置导致页面无法正常渲染。
• 工具：同样可以借助 Vue Devtools 查看路由相关信息，包括当前路由状态、路由表等。在路由守卫函数中添加 console.log 来追踪路由跳转过程。

4. 检查打包构建

• 排查思路：查看打包过程是否出现异常，如是否有依赖安装不完全，构建配置错误导致部分代码未正确打包。
• 工具：查看项目构建日志，若使用 Vue CLI，构建过程中的错误信息会在终端输出。确认 package.json 中的依赖版本是否兼容，尝试重新安装依赖（npm install 或 yarn install），并重新构建项目。

5. 检查 CSS 样式

• 排查思路：某些 CSS 样式可能导致元素隐藏或布局错乱，看似白屏。例如，全局样式设置了 display: none 或 visibility: hidden 影响了页面显示。
• 工具：使用浏览器开发者工具的 Elements 面板，通过审查元素查看样式应用情况，逐步排查可能影响页面显示的 CSS 规则。