试图从 Fullstack Vue: The Complete Guide to Vue.js 一书中找到解决多个 Vue.JS 项目依赖错误的方法

Question

当我尝试从本教程在 Vue3 上运行 Vue.js 日历应用程序时收到以下错误

https://github.com/zfhui/fullstack-vue/tree/master/02-calendar_app

我正在运行以下版本：npm 8.12.1 和 node v16.15.1

当我尝试使用 npm install 和/或 npm run dev 运行它时，我收到以下错误：

npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
npm WARN config production Use `--omit=dev` instead.
npm WARN config production Use `--omit=dev` instead.
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: babel-loader@7.1.5
npm ERR! Found: webpack@5.73.0
npm ERR! node_modules/webpack
npm ERR!   dev webpack@"^5.72.1" from the root project
npm ERR!   peer webpack@"4.x.x || 5.x.x" from @webpack-cli/configtest@1.1.1
npm ERR!   node_modules/@webpack-cli/configtest
npm ERR!     @webpack-cli/configtest@"^1.1.1" from webpack-cli@4.9.2
npm ERR!     node_modules/webpack-cli
npm ERR!       dev webpack-cli@"^4.9.2" from the root project
npm ERR!       3 more (@webpack-cli/configtest, @webpack-cli/info, @webpack-cli/serve)
npm ERR!   6 more (css-loader, terser-webpack-plugin, vue-loader, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer webpack@"2 || 3 || 4" from babel-loader@7.1.5
npm ERR! node_modules/babel-loader
npm ERR!   dev babel-loader@"^7.1.2" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: webpack@4.46.0
npm ERR! node_modules/webpack
npm ERR!   peer webpack@"2 || 3 || 4" from babel-loader@7.1.5
npm ERR!   node_modules/babel-loader
npm ERR!     dev babel-loader@"^7.1.2" from the root project
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\NotAgainLarry\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\NotAgainLarry\AppData\Local\npm-cache\_logs\2022-06-03T06_24_14_414Z-debug-0.log

当我尝试通过运行 npm audit fix --force、npm i 或 npm run dev 来解决错误时，我得到以下信息：

calendar-app@1.0.0 dev > cross-env NODE_ENV=development webpack-dev-server --open --hot [[100;90m..................[0m] - 
: [32;40mtiming[0m [35mconfig:load:flatten[0m Completed in 3ms[0m[K [..................]
 - : timing config:load:fla[webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema. 
- configuration.devtool should match pattern "^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$". BREAKING CHANGE since webpack 5: The devtool option is more strict. 
Please strictly follow the order of the keywords in the pattern. 

如何摆脱这些错误？ “请严格按照模式中关键字的顺序”是什么意思？

Answer 1

这是由 NPM 更改引起的问题。 你可以在这里阅读更多关于它的信息： https ://github.com/npm/cli/issues/4998

基本上，预期的依赖项不是 npm 正在下载的依赖项。

我是如何解决的：

1. 将您的节点版本固定到16.15.0 （您可以使用nvm做到这一点）
2. 删除你的node_modules和package-lock.json
3. npm install --legacy-peer-deps