vue3 项目启动时vite版本问题报错

背景:

我是在项目迁移过程中遇到的这个问题,前提可以看下面这篇

http://t.csdnimg.cn/g70Eq


问题描述

迁移项目时,将项目整体升级到了vue3版本,启动项目时出现下列报错:

npm ERR! Found: vite@5.1.4 
npm ERR! node_modules/vite 
npm ERR! dev vite@"^5.0.10" from the root project 
npm ERR! npm ERR! Could not resolve dependency: 
npm ERR! peer vite@"^3.0.0" from @vitejs/plugin-legacy@2.3.1 
npm ERR! node_modules/@vitejs/plugin-legacy 
npm ERR! dev @vitejs/plugin-legacy@"^2.2.0" from the root project 
npm ERR! npm ERR! Fix the upstream dependency conflict, or retry 
npm ERR! this command with --force or --legacy-peer-deps 
npm ERR! to accept an incorrect (and potentially broken) dependency resolution. npm ERR! 
npm ERR! 
npm ERR! For a full report see: 
npm ERR! C:\Users\tmed-\AppData\Local\npm-cache\_logs\2024-02-29T07_42_24_927Z-eresolve-report.txt npm ERR! A complete log of this run can be found in: C:\Users\tmed-\AppData\Local\npm-cache\_logs\2024-02-29T07_42_24_927Z-debug-0.log

错误分析:

这个错误是由于依赖版本之间的冲突导致的。具体地说,你的项目中同时存在两个依赖项,它们对 Vite 的版本有不同的要求,从而导致了冲突。

错误信息中提到了两个依赖项:

  1. 你的项目中使用的 vite 版本是 5.1.4。
  2. 一个名为 @vitejs/plugin-legacy 的插件,它要求 vite 的版本在 3.0.0 以上。

解决这个问题的方法有几种:

  1. 更新插件版本:尝试更新 @vitejs/plugin-legacy 插件的版本,使其与当前使用的 vite 版本兼容。你可以查看该插件的最新版本,然后在你的项目中更新到兼容的版本。

  2. 降级 vite 版本:如果你的项目中可以接受使用 vite 的较低版本,可以尝试降级 vite 到与 @vitejs/plugin-legacy 兼容的版本。你可以在 package.json 文件中将 vite 的版本号修改为与插件要求的版本相匹配的版本。

  3. 使用 --force 或 --legacy-peer-deps 选项:在运行 npm install 命令时,可以尝试添加 --force 或 --legacy-peer-deps 选项来强制解决依赖冲突。但是这种方法可能会导致依赖关系不一致,潜在地引入问题,因此应谨慎使用。

尝试上述方法中的一种,以解决依赖冲突问题。完成后,重新运行 npm install 命令。如果问题仍然存在,请检查 npm 日志文件,以获取更多详细信息,并尝试根据日志文件中的信息进一步解决问题。


解决方案

升级版本

查看vite的版本:GitHub - vitejs/vite: Next generation frontend tooling. It's fast!

 也可以去官网查看vite的插件:

Plugins | Vite

可以看出最新版本都是5.X,所以如果node支持的话可以直接升级到5,那么大概率能解决这样的问题。

我的vite版本之前是5.1.14,node的版本是>20,所以这里我试着更新了几个插件版本,降级vite的版本,都不兼容,会报下面的错误:

 

等等,上面的报错很多,大多是插件和vite版本之间不兼容。

于是我去搜索vite和其插件的兼容版本 ,无果,在翻看vite的更新日志的时候看见,这里:

地址是:https://github.com/vitejs/vite/blob/main/packages/vite/CHANGELOG.md 

既然vite5进行了大升级,其他几个插件又都有新版本,甚至都是5版本,那么我就想升级到新版本,于是开始升级。

升级前和升级后的版本信息:

 我是先确定vite的版本,然后将其他几个插件的版本都写成最新的,如果有不兼容则相应的改版本。

这个问题就解决了。

  • 19
    点赞
  • 30
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值