运行npm run serve报找不到@vue/cli-plugin-babel/preset及parseComponent错误

核心报错根因说明 #

你遇到的两个报错分别是错误的依赖安装命令、vue编译核心包版本不匹配导致的，按以下步骤操作即可解决：

步骤1：修正babel依赖安装错误 #

你此前执行的npm install @vue/cli-plugin-babel/preset --save-dev属于错误命令：@vue/cli-plugin-babel才是完整的包名，preset是该包内置的配置项，不存在单独的@vue/cli-plugin-babel/preset包，错误命令会写入异常依赖到package.json中。

• 打开项目根目录的package.json文件，在dependencies和devDependencies字段中查找是否存在@vue/cli-plugin-babel/preset相关条目，找到后直接删除该行。
• 如果babel相关依赖缺失，执行正确的安装命令：npm install @vue/cli-plugin-babel --save-dev

步骤2：解决parseComponent报错 #

该报错由vue和对应模板编译包版本不匹配导致：

• Vue2项目对应模板编译包为vue-template-compiler，必须和项目安装的vue版本完全一致
• Vue3项目对应模板编译包为@vue/compiler-sfc，必须和项目安装的vue版本完全一致
• 执行命令查看现有版本：

npm list vue
# Vue2执行这个查编译包版本
npm list vue-template-compiler
# Vue3执行这个查编译包版本
npm list @vue/compiler-sfc

• 如果两个包版本不一致，执行对应安装命令对齐版本，示例（将版本号替换为你项目实际的vue版本）：

# Vue2示例
npm install vue@2.6.14 vue-template-compiler@2.6.14 --save
# Vue3示例
npm install vue@3.2.45 @vue/compiler-sfc@3.2.45 --save

步骤3：重装依赖验证 #

• 关闭当前所有运行中的终端进程（包括json server进程）
• 删除项目根目录下的node_modules文件夹、package-lock.json文件
• 执行npm缓存清空命令：npm cache clean --force
• 执行npm install重新安装所有依赖
• 执行npm run serve启动项目验证

内容的提问来源于stack exchange，提问作者Tapialj