报错：Error: @vitejs/plugin-vue requires vue (＞=3.2.13) or @vue/compiler-sfc to be present in the depen

原创 已于 2024-04-29 09:16:04 修改 · 6.5k 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #前端 #javascript #node

于 2024-04-29 09:13:09 首次发布
本文讲述了作者在尝试运行从GitHub克隆的wujie微前端项目时遇到的错误，经过升级Vue版本、删除node_modules并重新安装、以及最终通过切换到最新Node版本20.11.1解决了问题。

从github下clone了一个wujie微前端演示项目，下载到本地运行不起来，报如下错误：

Error: @vitejs/plugin-vue requires vue (>=3.2.13) or @vue/compiler-sfc to be present in the dependency tree.

解决步骤

一、升级VUE版本

看字面意思这个报错应该是说vue版本不正确导致的，于是安装了最新版的vue，结果还是无果。

二、重新下载@vue/compiler-sfc

上网查询相关报错的解决方法，有人说是这个插件版本不正确导致，于是卸载重装，还是没有解决。

三、删除node_nodules重新npm install

有的说建议删掉node_modules，清除缓存后重新下载。依然没用。

四、使用nvm切换Node为最新版本(成功解决)

stackoverflow上有人对这个报错进行了提问，下面有回答说可能是node版本导致，突然想起来我们公司这个项目因为年代比较久远使用了比较老的node版本，然后使用nvm切换为20.11.1后成功运行！

菊の物语
关注
Vue3 - Vite 解决报错 [plugin:vite:vue] [@vue/compiler-sfc] Missing semicolon. vue3+vite 在运行或打包时出现报错详细解决！
🏆 前端领域优质创作者
09-06 4607
vue3，vite，报错，提示错误，控制台错误，vue3报错Missingsemicolon，如何解决这个问题，vitevue3项目运行报错，缺少分号；缺少操作符或分号，vue3+vite提示Missingsemicolon.，vue3打包，编译打包报错，启动报错，无法启动，打包失败，vite打包发布时出现错误，npmrunbuild，plugin:vite:vue，@vue/compiler-sfc，Vue3使用vite打包时出现Missingsemicolon问题，没有额外的分号怎么排查
vue3.2.X + Vite2.X + Pinia2.X的前端项目常见报错
listener_life的博客
05-25 9828
vue3.2.X + Vite2.X + Pinia2.X项目中，常见错误
Error: Failed to resolve vue/compiler-sfc——vite项目启动报错——npm run serve
yehaocheng520的博客
12-11 5211
Error: Failed to resolve vue/compiler-sfc——vite项目启动报错——npm run serve
Error: @vitejs/plugin-vue requires vue (＞=3.2.13) or @vue/compiler-sfc to be present in the dependen
卑微牛马学习笔记
08-21 1万+
创建完vue项目进行启动报错；Error: @vitejs/plugin-vue requires vue (＞=3.2.13) or @vue/compiler-sfc to be present in the dependen
import vue from ‘@vitejs/plugin-vue‘找不到模块“@vitejs/plugin-vue”或其相应的类型声明。但无法在当前 “moduleResolution“ 设置下
最新发布
2401_86968005的博客
09-24 234
vitejs/plugin-vue v6+ 是纯 ESM 模块，只能通过 import 加载，不能用 require。最膈应的问题，检索找了一圈没有找到答案，大多数都让更改配置文件，乱七八糟的。分析感觉是因为安装没有指定版本号，默认是最新版，就导致了冲突。很好又浪费了一天时间，恨。
Vue3实践的一些问题清单
Rainydaysqu的博客
10-21 1675
关于 vue3 的一些疑问点 1: 使用了 Vue3，是否都要遵循用 Composition API 的形式去写页面？ 答案是否定的。需要注意一点：Vue3 并没有废弃 Options API,甚至还会全力支持兼容 Vue2 语法的工作。而 CompositionAPI 出现的背景主要是为了解决逻辑抽象和和复用的问题，但不意味着它成为了 Vue3 的标准。So,如何区分场景使用Options API or Composition API主要看业务逻辑的复杂程序，例如一些简单的 toast/button
@vitejs/plugin-vue requires vue (＞=3.2.13) or @vue/compiler-sfc to be present in the dependency tre
qq_52055293的博客
05-19 7173
当创建 项目报错： @vitejs/plugin-vue requires vue (>=3.2.13) or @vue/compiler-sfc to be present in the dependency tree.
Error: @vitejs/plugin-vue requires vue (>=3.2.13) or @vue/compiler-sfc to be present in the dependency tree.
09-20
根据您的描述，出现了一个错误提示：Error: @vitejs/plugin-vue 需要依赖树中存在 vue (>=3.2.13) 或 @vue/compiler-sfc。解决此问题的方法是安装正确的依赖包。您可以按照以下步骤进行操作： 1. 打开终端并进入您...
运行vue报错 Error: @vitejs/plugin-vue requires vue (>=3.2.13) or @vue/compiler-sfc to be present in the dependency tree.
05-25
这个错误提示说需要安装 Vue 3.2.13 或 @vue/compiler-sfc。你可以按照以下步骤解决这个问题： 1. 确认你已经安装了 Vue。你可以在项目根目录下运行以下命令来安装 Vue： ``` npm install vue ``` 2. 确认你的...
运行Vue时出错 Error: @vitejs/plugin-vue requires vue (＞=3.2.13)
热门推荐
眼睛眯起来的博客
07-18 2万+
Error: @vitejs/plugin-vue requires vue (>=3.2.13) or @vue/compiler-sfc to be present in the dependency tree.
ERROR Error: @vitejs/plugin-vue requires vue (＞=3.2.13) or @vue/compiler-sfc to be present in the
康宁的博客
07-13 959
at Object.<anonymous> (F:\highschool\Springboot+Element备课\vue-project2023-06-18\node_modules\vue-loader\dist\compiler.js:14:15)at Object.<anonymous> (F:\highschool\Springboot+Element备课\vue-project2023-06-18\node_modules\vue-loader\dist\index.js:29:20)
Error@vitejs/plugin-vue requires vue (＞=3.2.13) or @vue/compiler-sfc to be present in the dependency
Unaided222的博客
03-26 786
搜索类似的问题也是用以上的方法解决，但对我的都不适用。
@vitejs/plugin-vue requires vue (＞=3.2.13) or @vue/compiler-sfc to be present in the dependency tree
qq_44447607的博客
05-17 1990
node版本是12.22.22,官网下载了最新版本（直接下了最新版，其他版本的不知道可不可以）2.下载@vue/compiler-sfc没有效果。1.升级vue版本，查看配置vue已是最新版。项目启动后报错，尝试做了如下方案。
Error @vitejsplugin-vue requires vue (＞=3.2.13) or @vuecompiler-sfc to be present in the dependen
m0_54883970的博客
03-08 3464
没有下载安装axios运行依赖 或者缺少这个库没有安装 npm i @vue/compiler-sfc
@vitejs/plugin-vue requires vue (>=3.2.13) or @vue/compiler-sfc to be present in the dependency tree.
08-02
在使用 Vite 构建 Vue 项目时，遇到 `@vitejs/plugin-vue` 插件报错提示 `requires vue (>=3.2.13) or @vue/compiler-sfc`，通常与项目依赖配置、Vue 版本、构建工具兼容性或 Node.js 环境有关。以下是几种常见解决方案及操作建议： ### 1. 确保正确安装 Vue 和 @vue/compiler-sfc 该错误通常表明项目中缺少 `vue` 或 `@vue/compiler-sfc` 依赖。可以尝试以下命令之一或组合使用： - 安装指定版本的 Vue： ```bash npm install vue@3.2.13 --save-dev ``` 安装完成后，确保版本符合插件要求，可通过 `npm list vue` 检查当前项目中 Vue 的版本 [^3]。 - 单独安装 `@vue/compiler-sfc`： ```bash npm install @vue/compiler-sfc --save-dev ``` 该包是 Vue 单文件组件编译器，Vite 在构建过程中依赖它进行模板解析 [^1]。 ### 2. 检查依赖树完整性 有时依赖项虽然已安装，但可能未正确出现在 `package.json` 中或未被正确解析。可以通过以下方式修复依赖树： - 删除 `node_modules` 和 `package-lock.json`： ```bash rm -rf node_modules package-lock.json ``` - 重新安装依赖： ```bash npm install ``` 这将确保所有依赖项按照 `package.json` 中的声明重新安装，并重建依赖树 [^3]。 ### 3. 检查 Node.js 版本 Node.js 环境版本过低可能导致兼容性问题。Vite 和 Vue 3 需要较新的 Node.js 版本支持。可以使用 `nvm`（Node Version Manager）切换 Node.js 版本，例如切换到 `20.11.1`： ```bash nvm install 20.11.1 nvm use 20.11.1 ``` 切换后再次运行项目，观察是否仍然报错 [^5]。 ### 4. 检查项目配置文件及模板语法 某些项目模板中可能包含特定语言或样式处理器的配置（如 `lang="scss"`），若未正确配置相关依赖（如 `sass-loader` 或 `postcss`），也可能间接导致构建失败。可以尝试以下操作： - 删除模板中的 `lang="scss"` 属性，确保项目能正常启动： ```html <style scoped> /* 原来为 <style lang="scss" scoped> */ </style> ``` - 后续再逐步添加样式处理器依赖，确保每一步都能正常运行 [^4]。 ### 5. 升级或降级 Vite 及相关插件 如果上述方法仍无法解决问题，可能是 `vite` 或 `@vitejs/plugin-vue` 版本与当前 Vue 版本不兼容。可以尝试升级或降级相关依赖版本： - 查看当前版本： ```bash npm list vite @vitejs/plugin-vue ``` - 升级或降级到兼容版本： ```bash npm install vite@latest @vitejs/plugin-vue@latest --save-dev ``` 或者指定特定版本号进行安装 [^2]。 ### 6. 使用 Vue CLI 替代 Vite 若项目对构建工具没有强依赖，可以尝试使用 Vue CLI 创建项目并迁移代码，以验证是否为 Vite 相关配置问题： ```bash vue create my-project cd my-project npm run serve ``` ###
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值