前端 - npm run dev 报错？

Question

看不懂。。。
log日志如下

# npm resolution error report

While resolving: babel-loader@7.1.5
Found: webpack@5.81.0
node_modules/webpack
  peer webpack@"^5.0.0" from css-loader@6.7.3
  node_modules/css-loader
    dev css-loader@"^6.7.3" from the root project
  peer webpack@"^5.20.0" from html-webpack-plugin@5.5.1
  node_modules/html-webpack-plugin
    dev html-webpack-plugin@"^5.5.1" from the root project
  peer webpack@"^5.0.0" from postcss-loader@7.3.0
  node_modules/postcss-loader
    dev postcss-loader@"^7.3.0" from the root project
  peer webpack@"^5.1.0" from terser-webpack-plugin@5.3.7
  node_modules/terser-webpack-plugin
    terser-webpack-plugin@"^5.3.7" from webpack@5.81.0
  peer webpack@"^4.0.0 || ^5.0.0" from url-loader@4.1.1
  node_modules/url-loader
    dev url-loader@"^4.1.1" from the root project
  peer webpack@"^4.1.0 || ^5.0.0-0" from vue-loader@17.1.0
  node_modules/vue-loader
    dev vue-loader@"^17.1.0" from the root project
  peer webpack@"^4.0.0 || ^5.0.0" from webpack-dev-middleware@5.3.3
  node_modules/webpack-dev-middleware
    webpack-dev-middleware@"^5.3.1" from webpack-dev-server@4.13.3
    node_modules/webpack-dev-server
      dev webpack-dev-server@"^4.13.3" from the root project
  peerOptional webpack@"^4.37.0 || ^5.0.0" from webpack-dev-server@4.13.3
  node_modules/webpack-dev-server
    dev webpack-dev-server@"^4.13.3" from the root project
  dev webpack@"^5.81.0" from the root project
  peer webpack@"5.x.x" from webpack-cli@5.0.2
  node_modules/webpack-cli
    dev webpack-cli@"*" from the root project

Could not resolve dependency:
peer webpack@"2 || 3 || 4" from babel-loader@7.1.5
node_modules/babel-loader
  dev babel-loader@"^7.1.1" from the root project

Conflicting peer dependency: webpack@4.46.0
node_modules/webpack
  peer webpack@"2 || 3 || 4" from babel-loader@7.1.5
  node_modules/babel-loader
    dev babel-loader@"^7.1.1" from the root project

Fix the upstream dependency conflict, or retry
this command with --force or --legacy-peer-deps
to accept an incorrect (and potentially broken) dependency resolution.

Answer 1

依赖项版本不兼容所导致的。babel-loader@7.1.5 需要 webpack 的版本为 2.x.x, 3.x.x 或 4.x.x，而你的项目里安装的 webpack 版本为 5.81.0。
1.更新babel-loader：

npm install babel-loader@latest --save-dev

2.降webpack版本：

npm install webpack@4.46.0 --save-dev

Answer 2

看起来是OP创建Vue项目的命令用错了，使用 npm init vue 就行了，或者你已经安装了 VueCLI 的话，使用 vue create myvue 就行。

使用 vue init webpack myvue 的话会选择基于 webapck 模板库创建项目，所以可能各种依赖项版本就会出现问题。

项目脚手架 - 工具链 | Vue.js
创建一个项目 | Vue CLI