Vue路由白屏解决方案：ChatGPT实测对比

Vue项目突然白屏，排查起来往往让人头大。尤其是当你引入了ChatGPT这类第三方SDK时，问题可能就藏在集成代码的某个角落。下面按优先级顺序，逐一拆解可能的原因和解决办法。

确认白屏是否由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根实例根本没挂载成功。

第二步：检查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 = ... }即可。

来源：互联网