【解决问题】Vue 项目中安装依赖 npm install 一直报错

【解决问题】Vue 项目中安装依赖 npm install 一直报错

在 GitHub 上面找了几个项目,下载下来想执行以下,首先根据 README 文档进行安装依赖:

npm install

但接下来就一直报错,报错信息如下:

npm ERR! code 1
npm ERR! path G:\前端自学资料\项目实例\Vue 项目\vue2-douban-market-master\node_modules\node-sass
npm ERR! ***mand failed
npm ERR! ***mand C:\WINDOWS\system32\cmd.exe /d /s /c node scripts/build.js
npm ERR! Building: F:\nodejs\node.exe G:\前端自学资料\项目实例\Vue 项目\vue2-douban-market-master\node_modules\node-gyp\bin\node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp verb cli [
npm ERR! gyp verb cli   'F:\\nodejs\\node.exe',
npm ERR! gyp verb cli   'G:\\前端自学资料\\项目实例\\Vue 项目\\vue2-douban-market-master\\node_modules\\node-gyp\\bin\\node-gyp.js',
npm ERR! gyp verb cli   'rebuild',
npm ERR! gyp verb cli   '--verbose',
npm ERR! gyp verb cli   '--libsass_ext=',
npm ERR! gyp verb cli   '--libsass_cflags=',
npm ERR! gyp verb cli   '--libsass_ldflags=',
npm ERR! gyp verb cli   '--libsass_library='
npm ERR! gyp verb cli ]
npm ERR! gyp info using node-gyp@3.8.0
npm ERR! gyp info using node@18.12.1 | win32 | x64
npm ERR! gyp verb ***mand rebuild []
npm ERR! gyp verb ***mand clean []
npm ERR! gyp verb clean removing "build" directory
npm ERR! gyp verb ***mand configure []
npm ERR! gyp verb check python checking for Python executable "python2" in the PATH
npm ERR! gyp verb `which` failed Error: not found: python2
npm ERR! gyp verb `which` failed     at getNotFoundError (G:\前端自学资料\项目实例\Vue 项目\vue2-douban-market-master\node_modules\which\which.js:13:12)
npm ERR! gyp verb `which` failed     at F (G:\前端自学资料\项目实例\Vue 项目\vue2-douban-market-master\node_modules\which\which.js:68:19)
npm ERR! gyp verb `which` failed     at E (G:\前端自学资料\项目实例\Vue 项目\vue2-douban-market-master\node_modules\which\which.js:80:29)
npm ERR! gyp verb `which` failed     at G:\前端自学资料\项目实例\Vue 项目\vue2-douban-market-master\node_modules\which\which.js:89:16
npm ERR! gyp verb `which` failed     at G:\前端自学资料\项目实例\Vue 项目\vue2-douban-market-master\node_modules\isexe\index.js:42:5
npm ERR! gyp verb `which` failed     at G:\前端自学资料\项目实例\Vue 项目\vue2-douban-market-master\node_modules\isexe\windows.js:36:5
npm ERR! gyp verb `which` failed     at FSReqCallback.on***plete (node:fs:207:21)
npm ERR! gyp verb `which` failed  python2 Error: not found: python2
npm ERR! gyp verb `which` failed     at getNotFoundError (G:\前端自学资料\项目实例\Vue 项目\vue2-douban-market-master\node_modules\which\which.js:13:12)
npm ERR! gyp verb `which` failed     at F (G:\前端自学资料\项目实例\Vue 项目\vue2-douban-market-master\node_modules\which\which.js:68:19)
npm ERR! gyp verb `which` failed     at E (G:\前端自学资料\项目实例\Vue 项目\vue2-douban-market-master\node_modules\which\which.js:80:29)
npm ERR! gyp verb `which` failed     at G:\前端自学资料\项目实例\Vue 项目\vue2-douban-market-master\node_modules\which\which.js:89:16
npm ERR! gyp verb `which` failed     at G:\前端自学资料\项目实例\Vue 项目\vue2-douban-market-master\node_modules\isexe\index.js:42:5
npm ERR! gyp verb `which` failed     at G:\前端自学资料\项目实例\Vue 项目\vue2-douban-market-master\node_modules\isexe\windows.js:36:5
npm ERR! gyp verb `which` failed     at FSReqCallback.on***plete (node:fs:207:21) {
npm ERR! gyp verb `which` failed   code: 'ENOENT'
npm ERR! gyp verb `which` failed }
npm ERR! gyp verb check python checking for Python executable "python" in the PATH
npm ERR! gyp verb `which` su***eeded python C:\Users\asus\AppData\Local\Programs\Python\Python38\python.EXE
npm ERR! gyp ERR! configure error
npm ERR! gyp ERR! stack Error: ***mand failed: C:\Users\asus\AppData\Local\Programs\Python\Python38\python.EXE -c import sys; print "%s.%s.%s" % sys.version_info[:3];
npm ERR! gyp ERR! stack   File "<string>", line 1
npm ERR! gyp ERR! stack     import sys; print "%s.%s.%s" % sys.version_info[:3];
npm ERR! gyp ERR! stack                       ^
npm ERR! gyp ERR! stack SyntaxError: invalid syntax
npm ERR! gyp ERR! stack
npm ERR! gyp ERR! stack     at ChildProcess.exithandler (node:child_process:412:12)
npm ERR! gyp ERR! stack     at ChildProcess.emit (node:events:513:28)
npm ERR! gyp ERR! stack     at maybeClose (node:internal/child_process:1091:16)
npm ERR! gyp ERR! stack     at ChildProcess._handle.onexit (node:internal/child_process:302:5)
npm ERR! gyp ERR! System Windows_NT 10.0.18363
npm ERR! gyp ERR! ***mand "F:\\nodejs\\node.exe" "G:\\前端自学资料\\项目实例\\Vue 项目\\vue2-douban-market-master\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
npm ERR! gyp ERR! cwd G:\前端自学资料\项目实例\Vue 项目\vue2-douban-market-master\node_modules\node-sass
npm ERR! gyp ERR! node -v v18.12.1
npm ERR! gyp ERR! node-gyp -v v3.8.0
npm ERR! gyp ERR! not ok
npm ERR! Build failed with error code: 1

npm ERR! A ***plete log of this run can be found in:
npm ERR!     F:\nodejs\node_cache\_logs\2023-04-02T15_28_50_593Z-debug-0.log

搜寻了好多种解决方法,依然不行,最后看到一篇博客说是 C盘 User 文件夹中的  .npmrc 文件的问题,于是我尝试删除该文件,再次进行 npm install ,此时报错信息开始发生变化:

npm notice 
npm notice New major version of npm available! 8.19.2 -> 9.6.3
npm notice Changelog: https://github.***/npm/cli/releases/tag/v9.6.3
npm notice Run npm install -g npm@9.6.3 to update!
npm notice
npm ERR! code 1
npm ERR! path G:\前端自学资料\项目实例\Vue 项目\vue2-douban-market-master\node_modules\node-sass
npm ERR! ***mand failed
npm ERR! ***mand C:\WINDOWS\system32\cmd.exe /d /s /c node scripts/build.js
npm ERR! Building: F:\nodejs\node.exe G:\前端自学资料\项目实例\Vue 项目\vue2-douban-market-master\node_modules\node-gyp\bin\node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp verb cli [
npm ERR! gyp verb cli   'F:\\nodejs\\node.exe',
npm ERR! gyp verb cli   'G:\\前端自学资料\\项目实例\\Vue 项目\\vue2-douban-market-master\\node_modules\\node-gyp\\bin\\node-gyp.js',
npm ERR! gyp verb cli   'rebuild',
npm ERR! gyp verb cli   '--verbose',
npm ERR! gyp verb cli   '--libsass_ext=',
npm ERR! gyp verb cli   '--libsass_cflags=',
npm ERR! gyp verb cli   '--libsass_ldflags=',
npm ERR! gyp verb cli   '--libsass_library='
npm ERR! gyp verb cli ]
npm ERR! gyp info using node-gyp@3.8.0
npm ERR! gyp info using node@18.12.1 | win32 | x64
npm ERR! gyp verb ***mand rebuild []
npm ERR! gyp verb ***mand clean []
npm ERR! gyp verb clean removing "build" directory
npm ERR! gyp verb ***mand configure []
npm ERR! gyp verb check python checking for Python executable "python2" in the PATH
npm ERR! gyp verb `which` failed Error: not found: python2
npm ERR! gyp verb `which` failed     at getNotFoundError (G:\前端自学资料\项目实例\Vue 项目\vue2-douban-market-master\node_modules\which\which.js:13:12)
npm ERR! gyp verb `which` failed     at F (G:\前端自学资料\项目实例\Vue 项目\vue2-douban-market-master\node_modules\which\which.js:68:19)
npm ERR! gyp verb `which` failed     at E (G:\前端自学资料\项目实例\Vue 项目\vue2-douban-market-master\node_modules\which\which.js:80:29)
npm ERR! gyp verb `which` failed     at G:\前端自学资料\项目实例\Vue 项目\vue2-douban-market-master\node_modules\which\which.js:89:16
npm ERR! gyp verb `which` failed     at G:\前端自学资料\项目实例\Vue 项目\vue2-douban-market-master\node_modules\isexe\index.js:42:5
npm ERR! gyp verb `which` failed     at G:\前端自学资料\项目实例\Vue 项目\vue2-douban-market-master\node_modules\isexe\windows.js:36:5
npm ERR! gyp verb `which` failed     at FSReqCallback.on***plete (node:fs:207:21)
npm ERR! gyp verb `which` failed  python2 Error: not found: python2
npm ERR! gyp verb `which` failed     at getNotFoundError (G:\前端自学资料\项目实例\Vue 项目\vue2-douban-market-master\node_modules\which\which.js:13:12)
npm ERR! gyp verb `which` failed     at F (G:\前端自学资料\项目实例\Vue 项目\vue2-douban-market-master\node_modules\which\which.js:68:19)
npm ERR! gyp verb `which` failed     at E (G:\前端自学资料\项目实例\Vue 项目\vue2-douban-market-master\node_modules\which\which.js:80:29)
npm ERR! gyp verb `which` failed     at G:\前端自学资料\项目实例\Vue 项目\vue2-douban-market-master\node_modules\which\which.js:89:16
npm ERR! gyp verb `which` failed     at G:\前端自学资料\项目实例\Vue 项目\vue2-douban-market-master\node_modules\isexe\windows.js:36:5
npm ERR! gyp verb `which` failed     at FSReqCallback.on***plete (node:fs:207:21) {
npm ERR! gyp verb `which` failed   code: 'ENOENT'
npm ERR! gyp verb `which` failed }
npm ERR! gyp verb check python checking for Python executable "python" in the PATH
npm ERR! gyp verb `which` su***eeded python C:\Users\asus\AppData\Local\Programs\Python\Python38\python.EXE
npm ERR! gyp ERR! configure error
npm ERR! gyp ERR! stack Error: ***mand failed: C:\Users\asus\AppData\Local\Programs\Python\Python38\python.EXE -c import sys; print "%s.%s.%s" % sys.version_info[:3];
npm ERR! gyp ERR! stack     import sys; print "%s.%s.%s" % sys.version_info[:3];
npm ERR! gyp ERR! stack                       ^
npm ERR! gyp ERR! stack SyntaxError: invalid syntax
npm ERR! gyp ERR! stack
npm ERR! gyp ERR! stack     at ChildProcess.exithandler (node:child_process:412:12)
npm ERR! gyp ERR! stack     at ChildProcess.emit (node:events:513:28)
npm ERR! gyp ERR! stack     at maybeClose (node:internal/child_process:1091:16)
npm ERR! gyp ERR! stack     at ChildProcess._handle.onexit (node:internal/child_process:302:5)
npm ERR! gyp ERR! System Windows_NT 10.0.18363
npm ERR! gyp ERR! ***mand "F:\\nodejs\\node.exe" "G:\\前端自学资料\\项目实例\\Vue 项目\\vue2-douban-market-master\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
npm ERR! gyp ERR! cwd G:\前端自学资料\项目实例\Vue 项目\vue2-douban-market-master\node_modules\node-sass
npm ERR! gyp ERR! node -v v18.12.1
npm ERR! gyp ERR! node-gyp -v v3.8.0
npm ERR! gyp ERR! not ok
npm ERR! Build failed with error code: 1

npm ERR! A ***plete log of this run can be found in:
npm ERR!     C:\Users\asus\AppData\Local\npm-cache\_logs\2023-04-03T02_52_37_898Z-debug-0.log

根据报错信息提示,可能是需要将 npm 版本 8.19.2 升到 9.6.3,于是我继续执行 npm install -g npm@9.6.3

而此时终于没有报错了,证明 npm install 成功了。

PS G:\前端自学资料\项目实例\Vue 项目\vue2-douban-market-master> npm install -g npm@9.6.3

added 1 package, and audited 238 packages in 8s

18 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
PS G:\前端自学资料\项目实例\Vue 项目\vue2-douban-market-master>

以上我以为解决了 npm install 一直报错的问题,但接下来,根据 README 文档要求,运行项目时又出现另一个问题:

PS G:\前端自学资料\项目实例\Vue 项目\vue2-douban-market-master> npm run dev
>>

> node build/dev-server.js

node:internal/modules/cjs/loader:998
  throw err;
  ^

Error: Cannot find module 'chalk'
Require stack:
- G:\前端自学资料\项目实例\Vue 项目\vue2-douban-market-master\build\check-versions.js
- G:\前端自学资料\项目实例\Vue 项目\vue2-douban-market-master\build\dev-server.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:995:15)
    at Module._load (node:internal/modules/cjs/loader:841:27)
    at Module.require (node:internal/modules/cjs/loader:1061:19)
    at require (node:internal/modules/cjs/helpers:103:18)
    at Object.<anonymous> (G:\前端自学资料\项目实例\Vue 项目\vue2-douban-market-master\build\check-versions.js:1:13)
    at Module._***pile (node:internal/modules/cjs/loader:1159:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1213:10)
    at Module.load (node:internal/modules/cjs/loader:1037:32)
    at Module._load (node:internal/modules/cjs/loader:878:12)
    at Module.require (node:internal/modules/cjs/loader:1061:19) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    'G:\\前端自学资料\\项目实例\\Vue 项目\\vue2-douban-market-master\\build\\check-versions.js',
    'G:\\前端自学资料\\项目实例\\Vue 项目\\vue2-douban-market-master\\build\\dev-server.js'
  ]
}

Node.js v18.12.1

根据报错信息,它要求安装 ' chalk ',但我 npm install chalk ,又会报错,报错信息和第一次一样,说到底,依赖就是没安装成功。有人说是 node-sass 的问题:

它是一个 native 包,默认情况下每个 node 版本都需要单独的 node-sass,一般会从 github release 上下载,而我安装的 node 版本是18.12.1 ,github release 没有这个版本,所以会转向本地构建,本地构建需要 windows build tools,简单说就是需要安装 visual studio 2019。安装这个后你的环境变量里就可以使用 python 等命令,但是明显你没有,所以会报错。

但我电脑上明明安装了  visual studio 2019 ,不知道为什么还是报错,根据我找到这个博主的解决方案:http://t.csdn.***/TwEll

用两种方法处理依赖:

方式一、替换依赖


卸载旧版本的 node-sass 和 sass-loader,安装 sass 和 sass-loader,不再使用 node-sass

// 第一步:

npm uninstall sass-loader node-sass

// 第二步:

npm install sass-loader@8.0.2 sass@1.26.5 -D


方式二、安装指定版本依赖


npm i node-sass@6.0.1 sass-loader@10.2.0

如果使用方法二之后报错,可能是安装过程中某些包丢失,尝试以下方法解决:

npm rebuild node-sass

但我尝试之后,又报出下面的错误

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: elm@2.0.1
npm ERR! Found: webpack@1.15.0
npm ERR! node_modules/webpack
npm ERR!   dev webpack@"^1.13.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer webpack@"^4.36.0 || ^5.0.0" from sass-loader@10.2.0
npm ERR! node_modules/sass-loader
npm ERR!   dev sass-loader@"10.2.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this ***mand with --force or --legacy-peer-deps
npm ERR! to a***ept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR!
npm ERR! For a full report see:
npm ERR! C:\Users\asus\AppData\Local\npm-cache\_logs\2023-04-03T08_07_16_823Z-eresolve-report.txt

npm ERR! A ***plete log of this run can be found in: C:\Users\asus\AppData\Local\npm-cache\_logs\2023-04-03T08_07_16_823Z-debug-0.log

新的问题又产生,没办法,再找解决方法:

根据其报错提示,我们去执行 npm install --force  或者  npm install --legacy-peer-deps

但。。。。。。好像一进行 npm install ,马上又回到最初的那个报错,死循环了,没有找到关键问题,归根结底还是依赖没能安装成功的缘故。最后,我又去翻看了一下 README 文档,发现该项目是在 nodejs 6.10.0 下开发的:

而我使用的是 nodejs 18.12.1 版本,初步判断就是由于我使用的版本太新,超出这个项目所需的要求,使得 npm 的包出现问题,一直报错,而这里,我又看到 README 文档 说建议使用 yarn 下载依赖,我果断尝试,最后完美解决了项目下载依赖并运行会报错等系列问题。【所以说还是得注意 README 文档的相关信息】

至于怎么解决 npm 包的问题导致无法加载依赖和运行项目 npm run dev 会报错的问题,暂时认为需要换成对应的 node.js 版本,但频繁换 node.js 版本也很不方便,这时可以使用 nvm,一个nodejs 版本管理工具!来进行版本是使用控制。


下面说说下载安装 nvm 的步骤:

【写在前面】首先要注意,先把电脑上的 nodejs 卸载干净,否则后面会出现一些问题。 

1. 去官网下载并安装:https://nvm.uihtm.***/

【注意】选择 nvm 安装路径时文件夹名不要出现中文和空格

2. 以管理员身份运行并输入 nvm ,出现下图信息说明安装成功

3. nvm 命令

常见的 nvm 命令

1. nvm -v // 查看 nvm 版本

  • nvm -version // 显示 nvm 版本及其信息

2. nvm list //显示版本列表

  • nvm list :显示已安装的版本(同 nvm list installed
  • nvm list installed:显示已安装的版本
  • nvm list available:显示所有可以下载的版本

3. nvm install //安装指定版本node.js

  • nvm install 16.5.0:安装 16.5.0 版本的 node.js
  • nvm install latest:安装最新版本

4. nvm use // 使用指定版本node

  • nvm use 16.5.0: 切换到 16.5.0 版本的 node.js
  • --lts // 自动切换到长期支持版本
  • --lts=<LTS name> // 自动切换到指定名称的 node 长期支持版本

5. nvm uninstall <version> // 卸载指定版本 node

  • nvm uninstall 14.5.0:卸载到 14.5.0 版本的 node.js
  • nvm uninstall --lts // 卸载长期支持版本的node
  • nvm uninstall --lts=<LTS name> // 卸载一个指定名称的长期支持版本的node

6. nvm --help //显示命令行帮助信息 

 【注】在运行 nvm install 的时候,有可能会出现无权限安装的问题,请以管理员身份运行 cmd 

其他的命令 

  • nvm deactivate // 取消当前nvm命令行效果

1. nvm 查看 node 版本

  • nvm current // 查看当前使用的 node 版本
  • nvm ls // 查看所有本地可用的 node 版本
  • nvm ls <version> // 参看指定版本
  • nvm ls-remote // 查看所有可用远程版本
  • --lts // 查看所有长期支持版本
  • nvm ls-remote <version> // 参看所有 node 的指定远程版本
  • --lts // 查看所有 node 长期支持版本
  • --lts=<LTS name> // 仅查看指定名称的长期支持版本

2. nvm 版本别名

  • nvm alias [<pattern>]  // 显示所有以 <pattern> 开头的版本别名
  • nvm alias <name> <version>  // 给版本 <version> 设置一个别名
  • nvm unalias <name> // 删除 <name> 的版本别名

3. nvm 和 npm

  • nvm install-latest-npm  // 在当前 node 版本中,将 npm 升级到最新版
  • nvm reinstall-packages <version>  // 在全局重新安装 npm,从 <version> 版本到当前版本

4. npm which 显示安装路径

npm which [current | <version>]  // 显示已安装 node 的安装路径。

5. nvm缓存

  • nvm cache dir  // 显示 nvm 的缓存目录
  • nvm cache clear // 清除 nvm 的缓存目录

6. nvm 运行 node

  • nvm exec [--silent] [version] [<***mand>]  // 在<version> 运行命令 <***mand>
  • nvm exec 4.8.3 node app.js  // Run `node app.js` with the PATH pointing to node 4.8.3
  • nvm run [--silent] [version] [<args>]  // 在<version>以参数<args>运行node --
  • nvm run 6.10.3 app.js //Run app.js using node 6.10.3

7. 设置镜像

  • nvm node_mirror [url] :设置 node 镜像。默认是 https://nodejs.org/dist/。如果不写 url,则使用默认 url。设置后可至安装目录 settings.txt 文件查看,也可直接在该文件操作。
  • nvm npm_mirror [url] :设置 npm 镜像。https://github.***/npm/cli/archive/。如果不写 url,则使用默认 url。设置后可至安装目录 settings.txt 文件查看,也可直接在该文件操作。

8. 版本管理

  • nvm on :开启 node.js 版本管理。
  • nvm off :关闭 node.js 版本管理。

 参考文章:

http://t.csdn.***/K7Fad

 

转载请说明出处内容投诉
CSS教程_站长资源网 » 【解决问题】Vue 项目中安装依赖 npm install 一直报错

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买