记录npm ERR! Could not resolve dependency；npm ERR! ERESOLVE unable to resolve dependency tree解决方案推荐

摘要： ...

在npm版本7以上时，npm install时出现类似如下报错：

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: vue-admin-template@4.4.0
npm ERR! Found: webpack@4.46.0
npm ERR! node_modules/webpack
npm ERR! webpack@"^4.0.0" from @vue/cli-plugin-babel@4.4.4
npm ERR! node_modules/@vue/cli-plugin-babel
npm ERR! dev @vue/cli-plugin-babel@"4.4.4" from the root project
npm ERR! webpack@"^4.0.0" from @vue/cli-service@4.4.4
npm ERR! node_modules/@vue/cli-service
npm ERR! dev @vue/cli-service@"4.4.4" from the root project
npm ERR! peer @vue/cli-service@"^3.0.0 || ^4.0.0-0" from @vue/cli-plugin-babel@4.4.4
npm ERR! node_modules/@vue/cli-plugin-babel
npm ERR! dev @vue/cli-plugin-babel@"4.4.4" from the root project
npm ERR! 2 more (@vue/cli-plugin-eslint, @vue/cli-plugin-unit-jest)
npm ERR! 2 more (@vue/cli-plugin-eslint, html-webpack-plugin)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! dev less-loader@"^11.1.0" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: webpack@5.88.2
npm ERR! node_modules/webpack
npm ERR! peer webpack@"^5.0.0" from less-loader@11.1.3
npm ERR! node_modules/less-loader
npm ERR! dev less-loader@"^11.1.0" 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\63089\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\63089\AppData\Local\npm-cache_logs\2023-08-04T04_52_18_223Z-debug-0.log

出错的原因是

1. 项目使用了 vue-admin-template@4.4.0。

2. 项目需要 webpack@4.46.0，在 @vue/cli-plugin-babel@4.4.4 和 @vue/cli-service@4.4.4 中指定了这个版本。

3. less-loader 的依赖发生了冲突。项目需要 less-loader@"^11.1.0"，但与此冲突的是 webpack@5.88.2，它需要 less-loader@"^11.1.3"。

粗暴解决的话，只需要npm install --legacy-peer-deps绕过 npm 对 peerDependencies的检测报错即可，或者在.npmrc中配置legacy-peer-deps=true。但是这种方式的话，其实是留着隐患，因为peerDependencies本来就是各个三方包声明的各种预依赖的包版本，现在报错了说明依赖关系存在问题。最好是可以真正解决。

真正解决方式：

降低less-loader的版本，解决了

"less-loader": "^7.x.x",

讲一下延伸内容

    这个vue-admin-template@4.4.0  基于vue-element-admin前端后台方案的大数据可视化模板.，这是一个极简的 vue admin 管理后台。它只包含了 Element UI & axios & iconfont & permission control & lint &ECharts & ECharts-stat等，这些搭建后台必要的东西。

环境说明：

开发工具：HBuilder X 2.9.7.20201105

vue-admin-template@4.4.0

@vue/cli 4.5.7

npm@6.14.8

nginx-1.18.0

vue 2.6.10

vue-admin-template项目配置：

E:/01study/Vue-Bigdata-template/.env.production

# just a flag
ENV = 'production'
# base api
# VUE_APP_BASE_API = '/prod-api'
VUE_APP_BASE_API = 'http://192.168.16.71:8090'

E:/01study/Vue-Bigdata-template/src/main.js

注释或删除掉mock配置

/**
 * If you don't want to use mock-server
 * you want to use MockJs for mock api
 * you can execute: mockXHR()
 *
 * Currently MockJs will be used in the production environment,
 * please remove it before going online ! ! !
 */
/**
if (process.env.NODE_ENV === 'production') {
  const { mockXHR } = require('../mock')
  mockXHR()
}
*/

1. 发布

1.1. npm install

在Vue-Bigdata-template目录下，或者在HBuilder X项目工程下，执行命令：

npm install

由于开发过程中，频繁操作，需要重新发布一遍。

npm cache clean --force
npm WARN using --force I sure hope you know what you are doing.
rd node_modules /s
node_modules, 是否确认(Y/N)? y
del package-lock.json
npm install

npm install过程，有如下提示：

npm WARN vue-admin-template@4.4.0 No repository field.

1.这是因为删除node_modules文件，导致之前与代码仓库的联系消失，有两种解决方案：

方案一：将项目设置为私有

在package.json中添加

“private”: true

方案二：将项目的仓库地址添上即可

E:/01study/Vue-Bigdata-template/package.json

{
  "name": "vue-admin-template",
  "version": "4.4.0",
  "scripts": {
    "dev": "vue-cli-service serve",
    "build:prod": "vue-cli-service build",
......
  },
  "repository": {
    "type": "git",
    "url": "http://192.168.16.71:10101/summary/Vue-Bigdata-template.git"
  },

1.2. npm run dev

运行项目，检查工程。

npm run dev
> vue-admin-template@4.4.0 dev E:\01study\Vue-Bigdata-template
> vue-cli-service serve

'vue-cli-service' 不是内部或外部命令，也不是可运行的程序

或批处理文件。

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! vue-admin-template@4.4.0 dev: `vue-cli-service serve`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the vue-admin-template@4.4.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\xiaoyw\AppData\Roaming\npm-cache\_logs\2020-11-09T00_51_15_548Z-debug.log

这是由于步骤一：num install造成的问题，没有及时处理而引发，处理掉步骤一的问题，即可解决。

1.3. 打包：npm run build:prod

执行打包命令：npm run build:prod，报出如下错误提示：

在打包过程出现 没有可用于依赖类型的模块 CssDependency

Error: No module factory available for dependency type: CssDependency

解决方案如下：

在vue.config.js中添加：

module.exports = {
  ......
  css: {
    extract: false
  },

打包成功，在项目中增加dist目录，目录下包括：

static文件夹

favicon.ico

index.html