vue项目关于:Error: Cannot find module ‘D:\@vue\cli-service\bin\vue-cli-service.js‘和npm 安装依赖时无法解析依赖树的解决方案

今天在创建vue项目时出现了两个问题,分享一下我是如何解决的。

npm 安装依赖时无法解析依赖树

报错如下:

vue项目关于:Error: Cannot find module ‘D:\@vue\cli-service\bin\vue-cli-service.js‘和npm 安装依赖时无法解析依赖树的解决方案_第1张图片

可以看到这是由于本地安装的eslint版本过高所导致的

解决方案一

卸载or降低eslint的版本

npm uninstall eslint --dev

解决方案二

使用强制安装命令(不推荐)

npm i  --f

解决方案三

使用同级安装命令,这是最佳解决方案,只要是安装依赖时无法解析依赖树时都可以用这个命令来解决

vue项目关于:Error: Cannot find module ‘D:\@vue\cli-service\bin\vue-cli-service.js‘和npm 安装依赖时无法解析依赖树的解决方案_第2张图片

npm install --legacy-peer-deps

了解npm install xxxx --legacy-peer-deps命令

好奇宝宝发现这个命令非常好用,于是专门去研究了一下npm install xxxx --legacy-peer-deps命令是什么。为什么可以解决下载时候产生的依赖冲突呢?

npm install xxxx --legacy-peer-deps命令是什么?

npm install xxxx --legacy-peer-deps 是一个npm命令,用于在安装依赖项时启用旧版的peer依赖项解析策略。在npm 7及更高版本中,默认启用了新版的peer依赖项解析策略,该策略更加严格,可能会引发一些依赖项冲突的问题。

请注意,--legacy-peer-deps 选项是为了解决旧版依赖项解析问题而提供的临时解决方案。在可能的情况下,建议你尽量更新和升级你的项目依赖项,以适应新版的peer依赖项解析策略。

此处我使用该命令解决的是依赖版本过高的情况

实际上,--legacy-peer-deps 选项主要是为了解决旧版依赖项解析问题而提供的临时解决方案,而不是专门用于解决依赖版本过高的问题。使用 --legacy-peer-deps 选项可以让npm在安装依赖项时放宽对peer依赖项版本的限制,但这并不意味着它可以解决所有与依赖版本过高相关的问题。

当你使用 --legacy-peer-deps 选项时,npm可能会安装较旧的依赖项版本,以满足旧版的peer依赖项解析策略。这可能会导致一些依赖项版本过高的问题得到缓解,因为npm会更加宽松地解析依赖项版本的限制。但这并不是 --legacy-peer-deps 选项的主要设计目的。

为什么可以解决下载时候产生的依赖冲突呢?

--legacy-peer-deps 选项可以解决下载时产生的依赖冲突,因为它会使npm使用旧版的peer依赖项解析策略。在新版peer依赖项解析策略中,如果一个模块依赖于另一个模块的特定版本,而它的直接依赖项中的peer依赖项指定了与该版本不兼容的版本范围,那么npm就会报错并拒绝安装。

例如,如果模块A依赖于模块B的版本1.x,而模块C的peer依赖项指定了B的2.x版本,那么在新版peer依赖项解析策略下,npm会拒绝安装这些模块,并报告peer依赖项冲突错误。但是,在旧版peer依赖项解析策略下,npm会忽略peer依赖项的版本范围限制,并安装A和C,同时也安装B的1.x版本,以满足A的依赖关系。

Error: Cannot find module 'D:@vue\cli-service\bin\vue-cli-service.js

vue项目关于:Error: Cannot find module ‘D:\@vue\cli-service\bin\vue-cli-service.js‘和npm 安装依赖时无法解析依赖树的解决方案_第3张图片

当我执行npm start  serve(注意此处是什么要看package.json文件) 命令时报错如下

vue项目关于:Error: Cannot find module ‘D:\@vue\cli-service\bin\vue-cli-service.js‘和npm 安装依赖时无法解析依赖树的解决方案_第4张图片

查阅资料后我发现两个解决方案

方案一

删除vue项目中的node_modules和package-lock.json文件,然后在cmd命令行直接npm install。

一.删除node_modules和package-lock.json文件

vue项目关于:Error: Cannot find module ‘D:\@vue\cli-service\bin\vue-cli-service.js‘和npm 安装依赖时无法解析依赖树的解决方案_第5张图片

二.cmd命令行直接npm install

进入到项目所在文件夹输入命令npm install

vue项目关于:Error: Cannot find module ‘D:\@vue\cli-service\bin\vue-cli-service.js‘和npm 安装依赖时无法解析依赖树的解决方案_第6张图片

方案二

下面详细介绍使用方案一不起效果的情况。

1.打开vue项目node_modules文件下.bin中的vue-cli-service.cmd

vue项目关于:Error: Cannot find module ‘D:\@vue\cli-service\bin\vue-cli-service.js‘和npm 安装依赖时无法解析依赖树的解决方案_第7张图片

在该文件中原来定义如下:

vue项目关于:Error: Cannot find module ‘D:\@vue\cli-service\bin\vue-cli-service.js‘和npm 安装依赖时无法解析依赖树的解决方案_第8张图片

2.将该文件的信息更改如下保存然后到cmd运行命令npm run serve

@IF EXIST "%~dp0\node.exe" (
  "%~dp0\node.exe"  "%~dp0\..\@vue\cli-service\bin\vue-cli-service.js" %*
) ELSE (
  @SETLOCAL
  @SET PATHEXT=%PATHEXT:;.JS;=;%
  node  "%~dp0\..\@vue\cli-service\bin\vue-cli-service.js" %*
)

vue项目关于:Error: Cannot find module ‘D:\@vue\cli-service\bin\vue-cli-service.js‘和npm 安装依赖时无法解析依赖树的解决方案_第9张图片

你可能感兴趣的:(日常踩坑,javascript,vue.js,前端)