vue安裝less-loader依賴失敗問題及解決方案

Posted on 2022-08-24 by WalkonNet

vue安裝less-loader依賴失敗

vue可視化面板中提供的less-loader依賴安裝失敗，導致以下代碼識別不瞭，出現錯誤信息

因為該項目開發用的腳手架是3.11.0版本的，不能用vue可視化面板中提供的less-loader10.1.0，所以要另外要下載低版本的less-loader，比如5.0.0的。

但是我在命令行窗口下載失敗，以管理員身份打開命令行窗口下載也失敗。

然後我在編譯器終端項目運行以下代碼下載成功瞭，我用的編譯器是vscode

npm install [email protected]

如果先前已在項目中安裝瞭高版本的less-loader依賴，而且用不瞭，建議卸載後，重新安裝低版本

卸載less-loader

npm uninstall less-loader

安裝less-loader 5.0.0版本

npm install [email protected]

安裝less-loader報錯 unable to resolve dependency tree

安裝 Less

// 一起安裝
$ npm i less less-loader -D
// 分開安裝
$ npm i less -D
$ npm i less-loader -D

但是在安裝 less-loader 的時候失敗，報錯：

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! Found: [email protected]
npm ERR! node_modules/webpack
npm ERR! peer webpack@"^4.0.0" from @intervolga/[email protected]
npm ERR! node_modules/@intervolga/optimize-cssnano-plugin
npm ERR! @intervolga/optimize-cssnano-plugin@"^1.0.5" from @vue/[email protected]
npm ERR! node_modules/@vue/cli-service
npm ERR! peer @vue/cli-service@"^3.0.0 || ^4.0.0-0" from @vue/[email protected]
npm ERR! node_modules/@vue/cli-plugin-babel
npm ERR! dev @vue/cli-plugin-babel@"~4.5.0" from the root project
npm ERR! 3 more (@vue/cli-plugin-router, @vue/cli-plugin-vuex, the root project)
npm ERR! peer webpack@"^4.0.0 || ^5.0.0" from @soda/[email protected]
npm ERR! node_modules/@soda/friendly-errors-webpack-plugin
npm ERR! @soda/friendly-errors-webpack-plugin@"^1.7.1" from @vue/[email protected]
npm ERR! node_modules/@vue/cli-service
npm ERR! peer @vue/cli-service@"^3.0.0 || ^4.0.0-0" from @vue/[email protected]
npm ERR! node_modules/@vue/cli-plugin-babel
npm ERR! dev @vue/cli-plugin-babel@"~4.5.0" from the root project
npm ERR! 3 more (@vue/cli-plugin-router, @vue/cli-plugin-vuex, the root project)
npm ERR! 16 more (@vue/cli-plugin-babel, @vue/cli-service, …)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! dev less-loader@"*" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/webpack
npm ERR! peer webpack@"^5.0.0" from [email protected]
npm ERR! node_modules/less-loader
npm ERR! dev less-loader@"*" 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 /Users/dengzemiao/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/dengzemiao/.npm/_logs/2021-07-06T01_37_12_820Z-debug.log

這其實是 npm 版本低瞭或者 less-loader 版本高瞭，隻需升級 npm 或者降低 less-loader 的安裝版本即可，其他 CSS解析器也一樣。

降低 less-loader 版本

怎麼降低 less-loader 版本？

方式一：

1、通過新建項目，選擇 Vue 自帶的 Less，新建成功之後，找到 package.json 文件，查看對應的 less、less-loader 版本，這樣就知道當前支持情況瞭。

2、知道版本之後，安裝指定的版本

$ npm i [email protected] -D$ npm i [email protected] -D

3、安裝成功之後需要重新運行項目才會生效。

方式二：

1、直接安裝 Less 最新版本，然後通過 npm 搜索 less-loader 查看版本列表，自行手動安裝低版本，能安裝成功的就行

2、安裝 less

$ npm i less -D

3、通過 NPM 官網搜索 less-loader，獲得版本列表

4、然後一個一個版本的安裝下去，一直到安裝成功。

$ npm i [email protected] -D

5、安裝成功之後需要重新運行項目才會生效。

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

vue安裝less-loader依賴失敗問題及解決方案

目錄