【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!

猜你喜欢

转载自blog.csdn.net/weixin_42553583/article/details/130760525