升级Node.js至18后旧项目NPM依赖版本冲突问题求助

将Node.js从14版本升级至18版本后，执行旧项目的依赖安装时出现以下NPM依赖版本冲突警告：

npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @vue/compiler-sfc@3.1.5
npm WARN Found: vue@3.2.19
npm WARN node_modules/vue
npm WARN   vue@"^3.1.5" from the root project
npm WARN   12 more (@vue/babel-preset-app, @vue/server-renderer, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer vue@"3.1.5" from @vue/compiler-sfc@3.1.5
npm WARN node_modules/@vue/compiler-sfc
npm WARN   dev @vue/compiler-sfc@"^3.0.0" from the root project
npm WARN   1 more (@vue/cli-service)
npm WARN
npm WARN Conflicting peer dependency: vue@3.1.5
npm WARN node_modules/vue
npm WARN   peer vue@"3.1.5" from @vue/compiler-sfc@3.1.5
npm WARN   node_modules/@vue/compiler-sfc
npm WARN     dev @vue/compiler-sfc@"^3.0.0" from the root project
npm WARN     1 more (@vue/cli-service)
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @vue/composition-api@0.3.4
npm WARN Found: vue@3.2.19
npm WARN node_modules/vue
npm WARN   vue@"^3.1.5" from the root project
npm WARN   12 more (@vue/babel-preset-app, @vue/server-renderer, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer vue@"^2.5.22" from @vue/composition-api@0.3.4
npm WARN node_modules/@vue/composition-api
npm WARN   peer @vue/composition-api@"^0.3.2" from vue-use-web@1.0.1
npm WARN   node_modules/vue-use-web
npm WARN
npm WARN Conflicting peer dependency: vue@2.7.14
npm WARN node_modules/vue
npm WARN   peer vue@"^2.5.22" from @vue/composition-api@0.3.4
npm WARN   node_modules/@vue/composition-api
npm WARN     peer @vue/composition-api@"^0.3.2" from vue-use-web@1.0.1
npm WARN     node_modules/vue-use-web
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @vueup/vue-quill@1.0.0-beta.8
npm WARN Found: vue@3.2.19
npm WARN node_modules/vue
npm WARN   vue@"^3.1.5" from the root project
npm WARN   12 more (@vue/babel-preset-app, @vue/server-renderer, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer vue@"^3.2.31" from @vueup/vue-quill@1.0.0-beta.8
npm WARN node_modules/@vueup/vue-quill
npm WARN   @vueup/vue-quill@"^1.0.0-beta.8" from the root project
npm WARN
npm WARN Conflicting peer dependency: vue@3.2.47
npm WARN node_modules/vue
npm WARN   peer vue@"^3.2.31" from @vueup/vue-quill@1.0.0-beta.8
npm WARN   node_modules/@vueup/vue-quill
npm WARN     @vueup/vue-quill@"^1.0.0-beta.8" from the root project
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: primevue@3.12.5
npm WARN Found: primeicons@4.1.0
npm WARN node_modules/primeicons
npm WARN   primeicons@"^4.1.0" from the root project
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer primeicons@"^5.0.0" from primevue@3.12.5
npm WARN node_modules/primevue
npm WARN   primevue@"^3.12.5" from the root project
npm WARN
npm WARN Conflicting peer dependency: primeicons@5.0.0
npm WARN node_modules/primeicons
npm WARN   peer primeicons@"^5.0.0" from primevue@3.12.5
npm WARN   node_modules/primevue
npm WARN     primevue@"^3.12.5" from the root project
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: sass-loader@12.1.0
npm WARN Found: webpack@4.46.0
npm WARN node_modules/webpack
npm WARN   peer webpack@"^4.0.0" from @intervolga/optimize-cssnano-plugin@1.0.6
npm WARN   node_modules/@intervolga/optimize-cssnano-plugin
npm WARN     @intervolga/optimize-cssnano-plugin@"^1.0.5" from @vue/cli-service@4.5.13
npm WARN     node_modules/@vue/cli-service
npm WARN   19 more (@soda/friendly-errors-webpack-plugin, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer webpack@"^5.0.0" from sass-loader@12.1.0
npm WARN node_modules/sass-loader
npm WARN   sass-loader@"^12.1.0" from the root project
npm WARN
npm WARN Conflicting peer dependency: webpack@5.75.0
npm WARN node_modules/webpack
npm WARN   peer webpack@"^5.0.0" from sass-loader@12.1.0
npm WARN   node_modules/sass-loader
npm WARN     sass-loader@"^12.1.0" from the root project
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: vue-clickaway@2.2.2
npm WARN Found: vue@3.2.19
npm WARN node_modules/vue
npm WARN   vue@"^3.1.5" from the root project
npm WARN   12 more (@vue/babel-preset-app, @vue/server-renderer, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer vue@"^2.0.0" from vue-clickaway@2.2.2
npm WARN node_modules/vue-clickaway
npm WARN   vue-clickaway@"^2.2.2" from vue-context@6.0.0
npm WARN   node_modules/vue-context
npm WARN
npm WARN Conflicting peer dependency: vue@2.7.14
npm WARN node_modules/vue
npm WARN   peer vue@"^2.0.0" from vue-clickaway@2.2.2
npm WARN   node_modules/vue-clickaway
npm WARN     vue-clickaway@"^2.2.2" from vue-context@6.0.0
npm WARN     node_modules/vue-context
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: vue-demi@0.11.4
npm WARN Found: @vue/composition-api@0.3.4
npm WARN node_modules/@vue/composition-api
npm WARN   peer @vue/composition-api@"^0.3.2" from vue-use-web@1.0.1
npm WARN   node_modules/vue-use-web
npm WARN     vue-use-web@"^1.0.1" from the root project
npm WARN
npm WARN Could not resolve dependency:
npm WARN peerOptional @vue/composition-api@"^1.0.0-rc.1" from vue-demi@0.11.4
npm WARN node_modules/vue-demi
npm WARN   vue-demi@"*" from @vueuse/core@5.3.0
npm WARN   node_modules/@vueuse/core
npm WARN   2 more (@vueuse/integrations, @vueuse/shared)
npm WARN
npm WARN Conflicting peer dependency: @vue/composition-api@1.7.1
npm WARN node_modules/@vue/composition-api
npm WARN   peerOptional @vue/composition-api@"^1.0.0-rc.1" from vue-demi@0.11.4
npm WARN   node_modules/vue-demi
npm WARN     vue-demi@"*" from @vueuse/core@5.3.0
npm WARN     node_modules/@vueuse/core
npm WARN     2 more (@vueuse/integrations, @vueuse/shared)
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: vue-js-modal@2.0.1
npm WARN Found: vue@3.2.19
npm WARN node_modules/vue
npm WARN   vue@"^3.1.5" from the root project
npm WARN   12 more (@vue/babel-preset-app, @vue/server-renderer, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer vue@"^2.6.11" from vue-js-modal@2.0.1
npm WARN node_modules/vue-js-modal
npm WARN   vue-js-modal@"^2.0.1" from the root project
npm WARN
npm WARN Conflicting peer dependency: vue@2.7.14
npm WARN node_modules/vue
npm WARN   peer vue@"^2.6.11" from vue-js-modal@2.0.1
npm WARN   node_modules/vue-js-modal
npm WARN     vue-js-modal@"^2.0.1" from the root project

一、冲突成因 #

1. NPM版本升级带来的校验严格化：Node.js 14配套NPM 6，Node.js 18配套NPM 8+。NPM 8对peer依赖的校验逻辑更严格，之前NPM 6自动忽略或静默处理的版本冲突，现在会直接抛出警告。
2. 依赖包版本不兼容：
   • 部分依赖包的peer依赖版本与项目核心依赖（如Vue）版本不匹配，比如@vue/compiler-sfc@3.1.5要求vue@3.1.5，但项目安装的是vue@3.2.19；
   • 部分依赖包仅支持Vue 2，但项目用的是Vue 3，比如@vue/composition-api@0.3.4是给Vue 2补全composition-api的，Vue 3本身已内置该特性；
   • 工具链版本不匹配，比如sass-loader@12.1.0要求Webpack 5，但项目依赖的@vue/cli-service@4.5.13基于Webpack 4；
   • 旧依赖引发连锁冲突，比如vue-use-web@1.0.1依赖的@vue/composition-api版本过低，和vue-demi@0.11.4要求的版本冲突。

二、解决步骤 #

1. 清理冗余依赖 #

• 卸载@vue/composition-api：Vue 3内置composition-api，无需额外安装，执行命令：npm uninstall @vue/composition-api；
• 替换Vue 2专属依赖：
  • vue-js-modal@2.0.1换成支持Vue 3的vue-js-modal@3.x，修改package.json为"vue-js-modal": "^3.0.0"；
  • vue-clickaway@2.2.2用@vueuse/core的onClickOutside方法替代，执行命令：npm uninstall vue-clickaway && npm install @vueuse/core。

2. 对齐核心依赖版本 #

• Vue与@vue/compiler-sfc版本同步：将@vue/compiler-sfc升级到和Vue相同的3.2.19版本，修改package.json为"@vue/compiler-sfc": "^3.2.19"；
• 升级Vue满足组件要求：@vueup/vue-quill@1.0.0-beta.8要求vue@^3.2.31，将Vue升级到3.2.47，修改package.json为"vue": "^3.2.47"；
• 升级PrimeIcons匹配PrimeVue：primevue@3.12.5要求primeicons@^5.0.0，修改package.json为"primeicons": "^5.0.0"。

3. 适配工具链版本 #

sass-loader@12.1.0要求Webpack 5，当前@vue/cli-service@4.5.13基于Webpack 4，有两种方案：

• 降级sass-loader：选支持Webpack 4的sass-loader@10.x，修改package.json为"sass-loader": "^10.2.1"；
• 升级@vue/cli-service：升级到5.x版本（基于Webpack 5），同步升级相关依赖：npm update @vue/cli-service @vue/cli-plugin-babel。

4. 修复vue-demi冲突 #

卸载@vue/composition-api后，vue-demi会自动适配Vue 3环境。若仍有警告，升级vue-demi：npm update vue-demi。

5. 清理并重新安装依赖 #

• 删除node_modules和package-lock.json：

  # Mac/Linux
  rm -rf node_modules package-lock.json
  # Windows
  rmdir /s node_modules && del package-lock.json
  

• 重新安装依赖：npm install；
• 若仍有警告，可临时用npm install --legacy-peer-deps绕过校验，但这是临时方案，建议彻底解决冲突后移除该参数。

6. 验证项目运行 #

执行启动命令（如npm run serve），检查是否正常运行，若有报错，根据提示继续调整依赖版本。

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