1.问题描述
以前的项目想做一下升级优化，安装less,结果执行完 npm install less less-loader --save-dev 就报错
npm error code ERESOLVE
npm error ERESOLVE could not resolve
npm error
npm error While resolving: [email protected]
npm error Found: [email protected]
npm error node_modules/webpack
npm error peer webpack@"^4.0.0" from @intervolga/[email protected]
npm error node_modules/@intervolga/optimize-cssnano-plugin
npm error @intervolga/optimize-cssnano-plugin@"^1.0.5" from @vue/[email protected]
npm error node_modules/@vue/cli-service
npm error peer @vue/cli-service@"^3.0.0 || ^4.0.0-0" from @vue/[email protected]
npm error node_modules/@vue/cli-plugin-babel
npm error dev @vue/cli-plugin-babel@"~4.5.19" from the root project
npm error 4 more (@vue/cli-plugin-eslint, @vue/cli-plugin-router, ...)
npm error peer webpack@"^4.0.0 || ^5.0.0" from @soda/[email protected]
npm error node_modules/@soda/friendly-errors-webpack-plugin
npm error @soda/friendly-errors-webpack-plugin@"^1.7.1" from @vue/[email protected]
npm error node_modules/@vue/cli-service
npm error peer @vue/cli-service@"^3.0.0 || ^4.0.0-0" from @vue/[email protected]
npm error node_modules/@vue/cli-plugin-babel
npm error dev @vue/cli-plugin-babel@"~4.5.19" from the root project
npm error 4 more (@vue/cli-plugin-eslint, @vue/cli-plugin-router, ...)
npm error 19 more (@vue/cli-plugin-babel, @vue/cli-plugin-eslint, ...)
npm error
npm error Could not resolve dependency:
npm error dev less-loader@"*" from the root project
npm error
npm error Conflicting peer dependency: [email protected]
npm error node_modules/webpack
npm error peerOptional webpack@"^5.0.0" from [email protected]
npm error node_modules/less-loader
npm error dev less-loader@"*" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.
npm error
npm error
npm error For a full report see:
npm error D:\Program Files\nodejs\node_cache\_logs\2024-05-23T06_52_30_961Z-eresolve-report.txt
npm error A complete log of this run can be found in: D:\Program Files\nodejs\node_cache\_logs\2024-05-23T06_52_30_961Z-debug-0.log是因为 组件库所使用的依赖库版本和本地安装版本不一致导致！简言之依赖冲突。
可以使用 --legacy-peer-deps 或者--force 忽略版本不一致的问题
我以前就是用这个方法，但是根本问题还是没解决
2.解决方法
执行 npm list --depth 0 (命令参数详解) 列出全局安装的 Node.js 模块及其依赖关系的工具
然后我采用最简单粗暴的，将package.json中的版本全部改成以下版本中对应的版本号
PS D:\WCS\sys_wcs-client> npm list --depth 0
[email protected] D:\WCS\sys_wcs-client
├── @vue/[email protected]
├── @vue/[email protected]
├── @vue/[email protected]
├── @vue/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected] extraneous
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected] extraneous
├── [email protected]
├── [email protected]
├── [email protected] extraneous
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]然后删除package-lock.json和node_modules,执行 npm i ，但是还是报错
npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: [email protected]
npm error Found: [email protected]
npm error vue@"2.7.16" from the root project
npm error Could not resolve dependency:
npm error peer vue@">= 2.5 < 2.7" from @vue/[email protected]
npm error node_modules/@vue/composition-api
npm error @vue/composition-api@"^1.7.2" from the root project
npm error
npm error this command with --force or --legacy-peer-deps
npm error
npm error
npm error For a full report see:
npm error D:\Program Files\nodejs\node_cache\_logs\2024-05-23T07_29_29_860Z-eresolve-report.txt
npm error A complete log of this run can be found in: D:\Program Files\nodejs\node_cache\_logs\2024-05-23T07_29_29_860Z-debug-0.log
于是我直接针对这个@vue/composition-api （@vue/composition-api功能介绍）,@vue/composition-api 是通过一个插件的方式,为 Vue2（2.7自带，2.6及以下可用） 提供类似 Vue3 composition API 的函数式编程能力。
关键字：2.7自带的，我修改的版本vue是2.7.16，所以我将这个依赖删除，在重新执行npm i,还是有一些警告，但是依赖安装成功啦
接下来回到正轨：安装less
npm install less [email protected] --save-dev
刚开始安装的时候less-loader没有加版本号和用了错误的版本号，导致走了不少弯路，后面百度很久才看到 less为4版本时，less-loader 为5~7没有问题
我less安装的是目前最新的版本4.2.0，less-loader用的7.3.0
直接在main.js引入
import Vue from "vue";
import App from "./App.vue";
import less from "less"
Vue.use(less);
Vue.config.productionTip = false;
new Vue({
render: (h) => h(App),
}).$mount("#app");样式标签上使用 lang="less"
<style lang="less"></style>
推荐一个less语法学习的博主链接：less学习语法_less var-CSDN博客