【Nuxt系列文章】Nuxt升级到3.5版本后出现白屏怎么解决？

大家好，我是刘明，十年创业老兵，开源技术爱好者。
大家都知道，生产环境下升级软件依赖到最新版本一定要慎重，很容易出现问题，而且还不好排查。
不过作为一个开源爱好者，在非生产环境下，我总是喜欢研究最新版本。
2023年5月16日，Nuxt开发团队发布了Nuxt 3.5.0版本.我把之前正在开发的一个项目升级了，结果竟然出现白屏。
记录一下问题出现的原因及解决过程，如果有童鞋遇到相同的情况可以参考借鉴。

问题出现的背景

我目前正在开发一个基于Nuxt3的后台管理系统，暂定名称为Nuxt-Pro.Nuxt Pro一直在持续进化中，没有用于生产环境。所以，Nuxt 3.5.0版本一发布，我就采用如下命令进行了升级

npx nuxi upgrade

升级完成后，再执行如下命令进行预览

npm run dev

预览命令执行过程中没有出现打包错误，但是浏览器打开localhost:3000时，结果很不幸，应用变成了白屏。

问题发生的原因

升级之前，Nuxt Pro的依赖是Nuxt 3.4和Vue3.2。
升级后，打开Chrome的开发者工具，切换到Console选项卡，果真报错，错误是vue中没有hasInjectionContext这个API.
hasInjectionContext是Vue 3.3中新增的API.
我在node_modules文件夹下找到vue，查看package.json文件，果然还是3.2版本。
错误原因：Vue版本没有升级。

问题的解决办法

办法一

重新升级，执行如下命令：

npx nuxi upgrade --force

加上--force参数后，Vue版本也进行了升级，问题完美解决。

办法二

重新安装所有依赖。先删掉node_modules文件夹，然后执行如下命令：

npm install

重新安装所有依赖后，Vue自动安装了3.3版本，问题解决。

童鞋们如果碰到类似问题，可以参考以上解决方案;如果遇到其他问题无法解决，可以给我私信。祝大家永无bug!