Vue页面白屏需分段定位：先查Elements确认#app是否存在，再通过beforeCreate、created、beforeMount、mounted钩子埋点日志，重点排查created中API未catch、mounted中ref未定义等异步/依赖错误。
Vue 页面白屏，大概率是组件初始化阶段出错了，但错误没抛到控制台（比如被静默吞掉、或发生在异步钩子中），导致页面没渲染、也没报错。关键要利用好 生命周期钩子 分段埋点，定位卡在哪一步。
先确认是否真的“白屏”而非“空内容”
打开浏览器开发者工具，检查 Elements 面板：
- 如果 <div id="app"> 存在但内部为空（没生成任何子节点），说明 Vue 实例已创建，但模板未成功渲染；
- 如果连 #app 都没挂载，说明 new Vue() 或 createApp() 根本没执行，或执行时报了同步致命错误（如语法错误、引用 undefined）；
- 检查 Console 是否有红色报错——尤其注意 “Uncaught TypeError” 或 “Failed to resolve component”，这类错误常导致白屏且不刷新页面。
在关键钩子中加 console.log 定位断点
在根组件（如 App.vue）中按顺序插入日志，快速缩小范围：
- beforeCreate：实例刚被创建，data/props/methods 还未初始化 → 打印说明 Vue 实例已启动；
- created：data、computed、watch 已就绪，但 DOM 还未挂载 → 此处适合检查 API 初始化、数据预设逻辑；
- beforeMount：虚拟 DOM 已创建，真实 DOM 还未替换 → 若卡在这里，可能是 template 编译失败或 render 函数异常；
- mounted：DOM 已挂载完成 → 如果 mounted 都没触发，说明前面某步同步报错中断了流程。
示例写法：
export default {
beforeCreate() { console.log('[Lifecycle] beforeCreate') },
created() { console.log('[Lifecycle] created') },
beforeMount() { console.log('[Lifecycle] beforeMount') },
mounted() { console.log('[Lifecycle] mounted') }
}重点排查 created 和 mounted 中的常见陷阱
这两个钩子最易藏雷：
立即学习“前端免费学习笔记（深入）”；
- API 调用未 await 或未 catch：Promise reject 被忽略会导致后续逻辑跳过，界面卡住；务必用 try/catch 包裹或 .catch() 处理；
-
依赖未定义属性直接调用方法：例如
this.$refs.xxx.focus()，但 ref 还没生成（mounted 前不可用）； -
第三方库初始化失败：如使用
new Chart(...)但 canvas 元素不存在，或 moment/locale 加载失败引发静默异常； - 路由守卫或插件注入错误：比如在 main.js 中 use(router) 前 router 已被错误使用，或 pinia store 在 setup 中访问了未定义 state。
补充技巧：开启 Vue Devtools 并检查组件树
如果 Devtools 中完全看不到组件结构（显示 “No Vue instance detected” 或组件列表为空）：
- 确认是否在开发环境引入了完整版 Vue（含运行时编译器），否则单文件组件 template 无法解析；
- 检查 webpack/vite 配置：vue-loader / @vitejs/plugin-vue 是否正常工作；
- Vue 3 用户注意：createApp(App).mount('#app') 必须在所有 import 之后执行，避免模块循环依赖导致挂载失败。
