Vue CLI Node 18+ 升级

你在对抗什么问题

老 Vue CLI 项目若仍锁在 Node 14 附近，升到 Node 18+ 时常见三类失败：babel 插件缺失、eslint-loader 解析失败、以及 Cannot find module——很多并不是业务代码写错，而是 Node 14 时代「幽灵依赖」（phantom deps）被隐式解析，升级后锁文件与 node_modules 结构一变就暴露。

本技能面向 Vue CLI + pnpm 栈，在作者已在 Node 22（.nvmrc 锁定）下跑通的路径上，把检测、切版本、重装依赖、babel.config.js 对齐和构建验证串成可重复流程。

技能如何推进升级

1. 检测当前状态：若已是 Node 18+，可跳过切版本与重装，直接进入配置与验证。
2. 切换 Node 版本：与项目 .nvmrc 或目标 LTS 对齐（资料中示例为 Node 22）。
3. 清空并重装依赖：删除 node_modules 后执行 pnpm install；pnpm workspace 必须在对应子包目录操作，否则锁文件与依赖树会对错项目。
4. 校正 babel.config.js：采用 Vue CLI 常见写法，并确保显式依赖就绪，例如 @babel/plugin-proposal-object-rest-spread、eslint-loader@2.2.1、qs 等（避免再靠幽灵解析）。
5. 验证构建：以生产构建为准；通过标准包括无 babel 报错、无模块找不到、无 eslint-loader 失败。

适用边界与回滚

• 技能描述的是 Vue CLI 升级路径，不是 Vite / Nuxt 3 等其它脚手架的通用迁移手册。
• 若构建仍失败：先核对 pnpm-lock.yaml 是否在正确目录生成、babel.config.js 语法、以及 node_modules/.bin/eslint-loader 是否存在。
• 需要回滚时，可恢复 babel.config.js、package.json、pnpm-lock.yaml 到 Git 中已知好版本，再重装依赖。