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

举报
liuming9157 发表于 2023/05/19 10:24:00 2023/05/19
【摘要】 2023年5月16日,Nuxt开发团队发布了Nuxt 3.5.0版本.我把之前正在开发的一个项目升级了,结果竟然出现白屏。 记录一下问题出现的原因及解决过程,如果有童鞋遇到相同的情况可以参考借鉴。

大家好,我是刘明,十年创业老兵,开源技术爱好者。
大家都知道,生产环境下升级软件依赖到最新版本一定要慎重,很容易出现问题,而且还不好排查。
不过作为一个开源爱好者,在非生产环境下,我总是喜欢研究最新版本。
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!

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。