試圖從 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