Node的版本选型与适配

Node的版本选型与适配 下面给出一份可以直接用于选型、升级和排查依赖冲突的版本适配清单。这里的nvm是 Node.js 版本管理器本身通常不参与项目构建真正需要匹配的是textNode.js ├── npm / pnpm ├── Vue 2 / Vue 3 ├── Vite / webpack └── TypeScript / vue-tsc / ts-loader版本要求会随工具小版本调整尤其是 Vite、pnpm 和vue-tsc。安装前仍应以对应版本包的engines字段和官方迁移文档为最终依据。推荐组合场景Node.js包管理器Vue构建工具TypeScript推荐度Vue 2 老项目维护16.20.xnpm 8 / pnpm 82.6.xwebpack 44.5-4.9仅维护Vue 2.7 过渡项目18.20.xnpm 10 / pnpm 92.7.16webpack 5 或 Vite 54.9-5.4可用Vue 3 稳定项目20.19npm 10 / pnpm 9/103.4/3.5Vite 5/65.2-5.7推荐Vue 3 新项目22.12npm 10/11 / pnpm 103.5.xVite 6/75.6最推荐旧 webpack 项目升级18.20 或 20.xnpm 9/10 / pnpm 92.7 或 3.xwebpack 54.9-5.x推荐升级路径极旧 Vue CLI 项目14/16npm 6/8Vue 2.6webpack 43.9-4.5临时运行最省心的现代组合textNode.js 22.12 pnpm 10 Vue 3.5 Vite 6 或 7 TypeScript 5.6 vue-tsc 与 TypeScript 同期更新如果项目暂时不能进入 Vite 7textNode.js 20 LTS pnpm 9 或 10 Vue 3.5 Vite 5 或 6 TypeScript 5.4-5.7Node.js 与 npmnpm 通常随 Node.js 一起安装不建议仅为了“版本新”而随意全局升级 npm。Node.js常见自带 npm生命周期状态倾向前端项目建议12.xnpm 6/7已 EOL不再使用14.xnpm 6/8已 EOL仅运行历史项目16.xnpm 8已 EOL仅维护历史项目18.xnpm 9/10已 EOL 或临近淘汰旧项目过渡20.xnpm 10LTS稳定推荐22.xnpm 10/11LTS新项目推荐24.xnpm 11新 LTS/Current 代际确认依赖后使用同一个 Node 大版本在不同小版本中可能携带不同 npm 版本因此应实际检查bashnode -v npm -v npm view npm engines常见经验npmNode.js 最低要求建议npm 6Node 6仅旧项目npm 7Node 10不建议新项目npm 8Node 12.13常见于 Node 16npm 9Node 14.17 或 16.13常见于 Node 18npm 10Node 18.17 或 20.5Node 20/22 推荐npm 11Node 20.17 或 22.9新版 Node 推荐不要在旧 Node 上直接执行npm install -g npmlatest更稳妥的做法是先升级 Node再使用该 Node 自带的 npm。Node.js 与 pnpmpnpmNode 14Node 16Node 18Node 20Node 22Node 246支持支持部分可用不推荐不推荐不推荐7支持支持支持部分可用不推荐不推荐8不支持或不建议支持支持支持一般可用不建议9不支持不支持支持支持支持视小版本10不支持不支持支持支持支持支持实用组合textNode 16 - pnpm 8 Node 18 - pnpm 9 或 10 Node 20 - pnpm 9 或 10 Node 22 - pnpm 10 Node 24 - pnpm 10 最新版建议通过 Corepack 管理 pnpmbashcorepack enable corepack prepare pnpm10.0.0 --activate pnpm -v在package.json中锁定版本json{ engines: { node: 20.19.0 }, packageManager: pnpm10.0.0 }注意pnpm 的严格依赖隔离会暴露 npm 扁平安装模式下被掩盖的“幽灵依赖”。从 npm 迁移到 pnpm 后出现模块找不到不一定是 pnpm 不兼容通常是项目漏写了直接依赖。nvm 适配说明macOS / Linux一般使用nvm-sh/nvmbashnvm install 20 nvm use 20 nvm alias default 20项目根目录放置.nvmrc20.19.0使用bashnvm install nvm useWindowsWindows 常用的是nvm-windows它和nvm-sh/nvm不是同一个实现命令和行为略有差别powershellnvm install 20.19.0 nvm use 20.19.0 node -v npm -v注意事项切换 Node 版本后全局安装的 npm 包通常不会自动共享。npm install -g、pnpm add -g安装的命令可能需要重新安装。Windows 上应避免同时保留独立安装版 Node 和 nvm 管理版 Node否则容易发生PATH冲突。使用where node或which node检查实际执行文件。Vue 2 适配清单Vue 2 已结束官方维护。新项目应使用 Vue 3。Vue 2.6项目推荐版本Vue2.6.14vue-template-compiler必须与 Vue 完全一致webpack4vue-loader15Vue CLI4 或 5TypeScript3.9-4.5 较稳Node.js14/16 较常见npm6/8pnpm6/7/8视旧依赖兼容性关键约束json{ dependencies: { vue: 2.6.14 }, devDependencies: { vue-template-compiler: 2.6.14, vue-loader: ^15.11.1 } }vue和vue-template-compiler必须一致例如不能这样混用textvue 2.6.14 vue-template-compiler 2.7.16否则常见报错Vue packages version mismatchVue 2.7项目推荐版本Vue2.7.16vue-template-compiler通常不再需要取决于工具链webpack4 或 5vue-loader15.10Vite4/5需 Vue 2 插件TypeScript4.5-5.4Node.js16/18/20取决于构建工具Composition API已内置Vue 2.7 不应再安装vue/composition-apitsimport { ref, computed } from vue使用 Vite 时Vue 2 不能使用官方 Vue 3 插件vitejs/plugin-vue需要 Vue 2 专用插件例如vitejs/plugin-vue2示例组合json{ dependencies: { vue: 2.7.16 }, devDependencies: { vitejs/plugin-vue2: ^2.3.0, vite: ^5.4.0, typescript: ~5.4.0 } }具体可用版本仍要检查插件的peerDependencies。Vue 3 适配清单VueNode.jsVitewebpackTypeScript使用建议3.0-3.214/162/354.1-4.7旧项目3.316/184/554.9-5.2可维护3.418/205/655.2-5.5稳定3.520/225/6/755.4推荐Vue 3 webpacktextvue 3.x webpack 5.x vue-loader 17.x vue/compiler-sfc 与 vue 保持相同版本示例json{ dependencies: { vue: 3.5.13 }, devDependencies: { vue/compiler-sfc: 3.5.13, vue-loader: ^17.4.0, webpack: ^5.97.0 } }Vue 3 Vitetextvue 3.x vitejs/plugin-vue 与 Vite 主版本兼容 vue/compiler-sfc 与 vue 保持相同版本 vite 根据 Node 版本选择vue和vue/compiler-sfc建议完全一致json{ dependencies: { vue: 3.5.13 }, devDependencies: { vue/compiler-sfc: 3.5.13 } }Vite 与 Node.jsViteNode.js 要求推荐 Node适用项目212.214/16历史项目314.18 / 1616历史项目414.18 / 1616/18旧项目518 / 2018.20/20稳定项目618 / 20 / 2220/22现代项目720.19 或 22.1222.12新项目Vite 7 对 Node 的要求比较严格textNode.js 20.19 或 Node.js 22.12因此以下组合可能失败textNode 20.10 Vite 7 Node 22.0 Vite 7即使 Node 主版本看起来足够小版本仍可能不满足要求。常见对应关系ViteVue 插件Vite 2vitejs/plugin-vue1/2Vite 3vitejs/plugin-vue3Vite 4vitejs/plugin-vue4Vite 5vitejs/plugin-vue5Vite 6vitejs/plugin-vue5/6检查 peer 约束Vite 7使用与其声明兼容的最新版插件不要只凭主版本猜测应直接检查bashnpm view vite7 engines npm view vitejs/plugin-vue peerDependencieswebpack 适配清单webpackNode.js 理论最低版本实际建议Vue 配套3旧版 Node不再使用Vue 2 老项目46.11Node 12/14/16Vue 2 vue-loader 15510.13Node 16/18/20/22Vue 2.7 或 Vue 3虽然 webpack 5 核心可能支持较旧 Node但实际项目中的 loader、plugin、ESLint、TypeScript 和测试工具通常会要求更高版本。因此现代 webpack 5 项目建议至少使用textNode.js 18 webpack 5 webpack-cli 5Vue 2 webpacktextVue 2.6/2.7 webpack 4/5 vue-loader 15Vue 3 webpacktextVue 3 webpack 5 vue-loader 16/17 vue/compiler-sfc不要在 Vue 3 中使用textvue-loader 15 vue-template-compiler不要在 Vue 2 中使用textvue-loader 17 vue/compiler-sfc 作为 Vue 3 编译链TypeScript 适配清单TypeScript 与 Node 并非只有一条简单的硬性对应关系。构建工具、声明文件和vue-tsc往往比 TypeScript 本身更早限制版本。TypeScriptNode.js 建议Vue 场景3.912/14Vue 2 老项目4.1-4.414/16Vue 2、早期 Vue 34.5-4.914/16/18Vue 2.7、Vue 3.2/3.35.0-5.316/18/20Vue 3.3/3.45.4-5.518/20/22Vue 3.4/3.55.618/20/22Vue 3.5、新项目Vue 2 TypeScriptVue 2.6 老项目通常使用texttypescript 3.9-4.5 ts-loader 8/9取决于 webpack vue-class-component vue-property-decorator对应关系textwebpack 4 - ts-loader 8 webpack 5 - ts-loader 9旧项目不要直接把 TypeScript 从 3.x 升到 5.x。常见破坏点包括装饰器行为变化useDefineForClassFields第三方types/*使用新版语法旧版ts-loader不支持新版 TypeScriptvue-property-decorator类型推导变化Vue 3 TypeScript推荐使用texttypescript vue-tsc vue/compiler-sfc类型检查vue-tsc --noEmit构建vue-tsc --noEmit vite buildvue-tsc会调用 TypeScript 的内部能力因此不能无限制地任意搭配。升级时建议把这几个包一起检查bashpnpm outdated vue typescript vue-tsc vue/compiler-sfc vite vitejs/plugin-vue典型配置json{ scripts: { dev: vite, type-check: vue-tsc --noEmit, build: vue-tsc --noEmit vite build } }Vue CLI 适配清单Vue CLI 已处于维护模式新项目推荐 Vite。Vue CLIwebpackNode.js 建议Vue3410/12/14Vue 24412/14/16Vue 2部分 Vue 35514/16/18Vue 2 或 Vue 3老 Vue CLI 项目升级顺序建议text先固定 lockfile - 修复 Node 版本 - 升 Vue CLI 5 / webpack 5 - 升 TypeScript 和 ESLint - 再考虑 Vue 2.7 或 Vue 3 - 最后考虑迁移 Vite不要同时升级 Node、Vue、webpack、TypeScript、ESLint 和包管理器否则发生问题时很难定位来源。可直接采用的版本模板Vue 3 Vite 现代稳定版json{ engines: { node: 20.19.0 }, packageManager: pnpm10.0.0, dependencies: { vue: ^3.5.0 }, devDependencies: { vitejs/plugin-vue: ^6.0.0, vue/compiler-sfc: ^3.5.0, typescript: ^5.6.0, vite: ^6.0.0, vue-tsc: ^2.2.0 } }插件的具体主版本需根据选定的 Vite 版本检查peerDependencies。Vue 3 webpack 5json{ engines: { node: 18.18.0 }, dependencies: { vue: ^3.5.0 }, devDependencies: { vue/compiler-sfc: ^3.5.0, typescript: ^5.4.0, ts-loader: ^9.5.0, vue-loader: ^17.4.0, webpack: ^5.90.0, webpack-cli: ^5.1.0 } }Vue 2.7 维护版json{ engines: { node: 18 21 }, dependencies: { vue: 2.7.16 }, devDependencies: { typescript: ~5.4.0, webpack: ^5.90.0, webpack-cli: ^5.1.0, vue-loader: ^15.11.0 } }Vue 2.6 历史项目json{ engines: { node: 14 17 }, dependencies: { vue: 2.6.14 }, devDependencies: { typescript: ~4.5.5, vue-loader: ^15.10.0, vue-template-compiler: 2.6.14, webpack: ^4.47.0 } }版本锁定建议.nvmrc20.19.0package.jsonjson{ engines: { node: 20.19.0 23 }, packageManager: pnpm10.0.0 }pnpm 可增加严格 Node 检查.npmrcengine-stricttrueCI 中使用与本地完全一致的 Node 主版本和包管理器yaml- uses: actions/setup-nodev4 with: node-version-file: .nvmrc cache: pnpm提交锁文件textnpm - package-lock.json pnpm - pnpm-lock.yaml同一个项目只保留一种锁文件不要同时维护package-lock.json、pnpm-lock.yaml和yarn.lock。排查命令查看当前环境bashnode -v npm -v pnpm -v npx vite --version npx webpack --version npx tsc -v npx vue-tsc -V查看包的 Node 要求bashnpm view vite engines npm view webpack engines npm view pnpm engines npm view typescript engines查看插件的配套要求bashnpm view vitejs/plugin-vue peerDependencies npm view vue-loader peerDependencies npm view vue-tsc peerDependencies查看项目中实际安装了哪些版本bashnpm ls vue vite webpack typescript vue-tsc或bashpnpm list vue vite webpack typescript vue-tsc检查 Node 来源bashwhich node which npm which pnpmWindowspowershellwhere node where npm where pnpm最终选型结论新项目优先选择textNode 22.12 pnpm 10 Vue 3.5 Vite 6/7 TypeScript 5.6兼容性优先的企业项目选择textNode 20 LTS pnpm 9/10 Vue 3.4/3.5 Vite 5/6 TypeScript 5.4-5.7Vue 2 项目应优先升级到2.7.16然后规划迁移 Vue 3。仍停留在 Vue 2.6、webpack 4、Node 14/16 的项目只适合作为短期维护方案不应继续作为新功能平台。