白屏问题需按顺序排查：先查network确认chatgpt接口是否发出，再检查路由守卫是否阻塞，接着验证vue实例挂载是否被sdk破坏，最后修复token注入导致的api拦截。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
确认白屏是否由ChatGPT集成引发
先排除干扰项：打开浏览器开发者工具→Network面板→勾选“Preserve log”→点击跳转触发白屏→观察请求列表中是否出现/chat、/v1/chat/completions等OpenAI相关接口。若这些请求压根没发出，说明白屏与ChatGPT无关，问题在Vue路由或组件自身。
若看到/api/token或/openai/auth回调成功但页面仍空白，且控制台无报错，【此时才需怀疑ChatGPT SDK或封装逻辑劫持了路由守卫】。
检查ChatGPT SDK是否覆盖了全局路由守卫
打开src/router/index.ts（或.js），查找router.beforeEach或router.beforeResolve钩子函数。重点扫描是否调用了类似useChatGPTAuth()、injectChatGuard()这类自定义函数。
方法一：临时注释全部守卫逻辑→保存→刷新→若白屏消失，证明是守卫阻塞。此时逐行放开，定位到具体哪一行return next(false)或next('/login')后未处理重定向路径。
方法二：在守卫内部加console.log('guard hit', to.path, from.path)→跳转时看控制台输出是否卡在某次调用后不再继续→若卡住，大概率是await chatGPT.checkAuth()未返回Promise结果，而SDK内部错误地吞掉了reject。
验证ChatGPT初始化是否破坏Vue应用挂载
第一步：打开Console，输入app._instance。如果返回undefined，说明Vue根实例根本没挂载成功。
用于在用户想通过浏览器自动化与 Google Gemini 或 ChatGPT 交互时。触发短语包括“ask Gemini”“ask ChatGPT”“ask GPT”“让...”。
第二步：检查main.ts中createApp(App)之后是否紧跟着app.use(chatGPTPlugin)，且该插件的install函数里执行了document.body.innerHTML = ''之类暴力清空DOM的操作——【这是导致白屏最隐蔽的原因：插件在mount前篡改了#app容器内容】。
第三步：搜索项目中所有new ChatGPTClient()或createChatGPT()调用，确认它们是否在App.vue的setup()或onBeforeMount中同步执行。若是，把它们移到onMounted内，并用try/catch包裹，防止初始化失败中断渲染流程。
修复ChatGPT Token注入导致的API拦截白屏
① 打开Application → Local Storage，检查是否存在chatgpt_token字段。若存在但值为空字符串或过期JWT，删除该键。
② 在src/utils/request.ts中查找Axios拦截器，确认是否对所有请求头统一添加了Authorization: Bearer ${localStorage.chatgpt_token}。若当前页面不依赖ChatGPT却强制注入无效token，后端可能因鉴权失败返回空响应体，导致Vue组件渲染时data为null而白屏。
③ 修改拦截器逻辑：仅当请求URL包含/openai或/chat时才注入token，其他请求保持原样。这一步不做，登录态会污染整个应用的HTTP链路。
这一步操作起来很简单，直接把if (config.url.includes('openai')) { config.headers.Authorization = ... }补全即可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
