在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
出错的原因是
项目使用了
vue-admin-template@4.4.0
。项目需要
webpack@4.46.0
,在@vue/cli-plugin-babel@4.4.4
和@vue/cli-service@4.4.4
中指定了这个版本。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