使用 vue-cli 创建的 Vue 2 项目的 npm 更新失败答案

【问题标题】：npm update fails for Vue 2 project, created with vue-cli使用 vue-cli 创建的 Vue 2 项目的 npm 更新失败
【发布时间】：2021-06-04 22:26:55
【问题描述】：

我用vue-cli 创建了一个Vue 2 项目并尝试运行npm update。不幸的是，我收到以下错误：

{
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: test-vue@0.1.0
npm ERR! Found: vue@2.6.12
npm ERR! node_modules/vue
npm ERR!   vue@"~2.6.11" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer vue@"3.0.7" from @vue/compiler-sfc@3.0.7
npm ERR! node_modules/@vue/compiler-sfc
npm ERR!   peerOptional @vue/compiler-sfc@"^3.0.0-beta.14" from @vue/cli-service@4.5.11
npm ERR!   node_modules/@vue/cli-service
npm ERR!     dev @vue/cli-service@"~4.5.0" from the root project
npm ERR!     1 more (@vue/cli-plugin-babel)
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!

我的 package.json 看起来像这样：

{
  "name": "test-vue",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@turf/turf": "^6.3.0",
    "bootstrap": "^4.5.3",
    "core-js": "^3.6.5",
    "leaflet": "^1.7.1",
    "leaflet-geodesy": "^0.2.1",
    "vue": "~2.6.11",
    "vue-router": "~3.2.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.1.3",
    "eslint-plugin-vue": "^6.2.2",
    "prettier": "^1.19.1",
    "sass": "^1.26.5",
    "sass-loader": "^8.0.2",
    "vue-template-compiler": "~2.6.11"
  }
}

我认为package.json 中的~ 应该阻止升级到 Vue 3？

感谢您的帮助！

编辑：按照 ncu -u 的建议尝试

PS E:\projects\test-vue> ncu -u
Upgrading E:\projects\test-vue\package.json
[====================] 20/20 100%
 core-js                  ^3.6.5  →   ^3.9.1
 vue                     ~2.6.11  →  ~2.6.12
 vue-router               ~3.2.0  →   ~3.5.1
 @vue/cli-plugin-babel    ~4.5.0  →  ~4.5.11
 @vue/cli-plugin-eslint   ~4.5.0  →  ~4.5.11
 @vue/cli-plugin-router   ~4.5.0  →  ~4.5.11
 @vue/cli-service         ~4.5.0  →  ~4.5.11
 eslint                   ^6.7.2  →  ^7.21.0
 eslint-plugin-prettier   ^3.1.3  →   ^3.3.1
 eslint-plugin-vue        ^6.2.2  →   ^7.7.0
 prettier                ^1.19.1  →   ^2.2.1
 sass                    ^1.26.5  →  ^1.32.8
 sass-loader              ^8.0.2  →  ^11.0.1
 vue-template-compiler   ~2.6.11  →  ~2.6.12

Run npm install to install new versions.

PS E:\projects\test-vue> npm install
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! Found: webpack@5.24.3
npm ERR! node_modules/webpack
npm ERR!   peer webpack@"^4.0.0 || ^5.0.0" from @soda/friendly-errors-webpack-plugin@1.8.0
npm ERR!   node_modules/@soda/friendly-errors-webpack-plugin
npm ERR!     @soda/friendly-errors-webpack-plugin@"^1.7.1" from @vue/cli-service@4.5.11
npm ERR!     node_modules/@vue/cli-service
npm ERR!       dev @vue/cli-service@"~4.5.11" from the root project
npm ERR!       4 more (@vue/cli-plugin-babel, @vue/cli-plugin-eslint, ...)
npm ERR!   peer webpack@">=4.0.0" from @vue/preload-webpack-plugin@1.1.2
npm ERR!   node_modules/@vue/preload-webpack-plugin
npm ERR!     @vue/preload-webpack-plugin@"^1.1.0" from @vue/cli-service@4.5.11
npm ERR!     node_modules/@vue/cli-service
npm ERR!       dev @vue/cli-service@"~4.5.11" from the root project
npm ERR!       4 more (@vue/cli-plugin-babel, @vue/cli-plugin-eslint, ...)
npm ERR!   8 more (babel-loader, copy-webpack-plugin, css-loader, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer webpack@"^4.0.0" from @intervolga/optimize-cssnano-plugin@1.0.6
npm ERR! node_modules/@intervolga/optimize-cssnano-plugin
npm ERR!   @intervolga/optimize-cssnano-plugin@"^1.0.5" from @vue/cli-service@4.5.11
npm ERR!   node_modules/@vue/cli-service
npm ERR!     dev @vue/cli-service@"~4.5.11" from the root project
npm ERR!     4 more (@vue/cli-plugin-babel, @vue/cli-plugin-eslint, ...)
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\Admin\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Admin\AppData\Local\npm-cache\_logs\2021-03-06T19_52_21_583Z-debug.log

【问题讨论】：

我猜你已经将你的依赖项更新为需要 Vue 3 的版本。找到它并降级回来......
删除你的 node_modules 和 package.lock 文件然后运行 npm i --legacy-peer-deps 希望它的工作

标签： vue.js npm vue-cli

【解决方案1】：

也许你可以尝试 npm i -g npm-check-updates 然后在根文件夹中尝试执行 ncu -u 这将更新你的依赖项、devDependencies 和 peerDependencies

【讨论】：

非常感谢您的帮助，杰伊！不幸的是，我收到了关于 webpack 的新错误。 - 我认为它应该集成到 vue-cli 中，不是吗？

【解决方案2】：

某些依赖项存在问题。我终于通过使用 vue-cli 创建一个新项目并在那里复制该 package.json 来解决这个问题。

编辑： 您必须确保使用所有依赖项的兼容版本。 - 最好的方法是使用 vue-cli 生成一个项目以获得兼容的版本。

长话短说：不要搞乱依赖关系

【讨论】：