【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!
- 点赞
- 收藏
- 关注作者
评论(0)