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的版本,然后将其他几个插件的版本都写成最新的,如果有不兼容则相应的改版本。

这个问题就解决了。

相关推荐

  1. 搭建vite+vue3项目遇到的问题

    2024-04-24 12:30:02       19 阅读
  2. vite+vue+ts项目解决方案

    2024-04-24 12:30:02       9 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-04-24 12:30:02       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-04-24 12:30:02       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-04-24 12:30:02       19 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-04-24 12:30:02       20 阅读

热门阅读

  1. 【ARM Coresight 系列文章19.3 -- ARM DSU 120 Debug block】

    2024-04-24 12:30:02       13 阅读
  2. 【electron报错】 electron-buidler打包sqlite3问题汇总

    2024-04-24 12:30:02       13 阅读
  3. word删除单页的页眉

    2024-04-24 12:30:02       13 阅读
  4. ISBN信息查询api接口

    2024-04-24 12:30:02       13 阅读
  5. 算法开发固定三方库版本

    2024-04-24 12:30:02       12 阅读
  6. web前端代码指南(vue3)

    2024-04-24 12:30:02       13 阅读
  7. ElasticSearch 入门学习

    2024-04-24 12:30:02       13 阅读
  8. 前后端连接完后的各种安全问题

    2024-04-24 12:30:02       13 阅读
  9. C++中的抽象类

    2024-04-24 12:30:02       16 阅读