本文作者:DurkBlue

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

记录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



此篇文章由DurkBlue博主亲自发布,转载请注明来处哟
文章投稿或转载声明

来源:DurkBlue版权归原作者所有,转载请保留出处。本站文章发布于 01-19
温馨提示:文章内容系作者个人观点,不代表DurkBlue博客对其观点赞同或支持。

赞(0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

阅读
分享

发表评论取消回复

快捷回复:
AddoilApplauseBadlaughBombCoffeeFabulousFacepalmFecesFrownHeyhaInsidiousKeepFightingNoProbPigHeadShockedSinistersmileSlapSocialSweatTolaughWatermelonWittyWowYeahYellowdog

评论列表 (暂无评论,294人围观)参与讨论

还没有评论,来说两句吧...