脚手架启动失败(Vue CLI/Vite/Create React App)

问题现象

执行 npm run serve(Vue CLI)/npm run dev(Vite/React)时抛出错误,典型报错:

  • Error: Cannot find module 'vue-cli-service'
  • Error: The engine "node" is incompatible with this module. Expected version ">=16.0.0". Got "14.17.0"
  • vite: error: Invalid options in vite.config.js: unknown option 'baseUrl'

深层原因

  1. 依赖损坏/缺失node_modules 未正确安装或被意外删除。
  2. 版本不兼容:Node/NPM版本与框架要求不匹配(如Vite要求Node 14.18+/16+)。
  3. 配置语法错误 :混淆不同脚手架的配置项(如Vite用base而非Vue CLI的baseUrl)。
  4. 缓存冲突:npm缓存的旧依赖与当前项目不兼容。

分步解决方案

步骤1:检查并升级Node/NPM版本(核心)

推荐用nvm(Node版本管理器) 管理多版本Node,避免全局版本冲突:

bash 复制代码
# 安装nvm(Mac/Linux)
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

# 安装指定版本Node(如18.x,满足绝大多数框架要求)
nvm install 18

# 切换到该版本
nvm use 18

# 验证版本
node -v # 输出v18.x.x
npm -v # 输出8.x.x

Windows用户可使用 nvm-windows,操作逻辑一致。

步骤2:清理并重新安装依赖
bash 复制代码
# Mac/Linux:删除依赖和锁文件
rm -rf node_modules package-lock.json

# Windows:删除依赖和锁文件
rd /s /q node_modules && del package-lock.json

# 重新安装依赖(推荐用pnpm,速度更快)
npm install -g pnpm
pnpm install
步骤3:清理npm缓存
bash 复制代码
npm cache clean --force
步骤4:修正配置文件语法

以Vite为例,避免混淆Vue CLI的配置项:

js 复制代码
// vite.config.js 正确配置
export default {
  base: '/my-project/', // 替代Vue CLI的baseUrl(项目基础路径)
  server: { port: 3000 } // 端口配置
}

验证

重新执行 npm run dev,项目正常启动并在浏览器访问 localhost:3000 则解决。

相关推荐
saber_andlibert1 小时前
TCMalloc底层实现
java·前端·网络
逍遥德1 小时前
如何学编程之01.理论篇.如何通过阅读代码来提高自己的编程能力?
前端·后端·程序人生·重构·软件构建·代码规范
冻感糕人~1 小时前
【珍藏必备】ReAct框架实战指南:从零开始构建AI智能体,让大模型学会思考与行动
java·前端·人工智能·react.js·大模型·就业·大模型学习
程序员agions1 小时前
2026年,“配置工程师“终于死绝了
前端·程序人生
alice--小文子1 小时前
cursor-mcp工具使用
java·服务器·前端
晚霞的不甘2 小时前
揭秘 CANN 内存管理:如何让大模型在小设备上“轻装上阵”?
前端·数据库·经验分享·flutter·3d
小迷糊的学习记录2 小时前
0.1 + 0.2 不等于 0.3
前端·javascript·面试
空&白2 小时前
vue暗黑模式
javascript·vue.js
梦帮科技2 小时前
Node.js配置生成器CLI工具开发实战
前端·人工智能·windows·前端框架·node.js·json
VT.馒头3 小时前
【力扣】2695. 包装数组
前端·javascript·算法·leetcode·职场和发展·typescript