菜单 搜索
首页 前端知识 Vue-cli 3.x 脚手架搭建的 Vue 2.x 项目进行 npm install 安装时报错: npm ERR! code 1……

Vue-cli 3.x 脚手架搭建的 Vue 2.x 项目进行 npm install 安装时报错: npm ERR! code 1……

2024-05-18 18:05:40 前端知识 前端哥 911 565 我要收藏

项目场景：

公司以前做过的项目，当时开发环境 npm，node.js 版本和现在都不一样，比较旧了，项目之前是用 Vue-cli 3.x 搭建的，Vue 2.x 写的，当时配套的第三方依赖版本也都很落后了，在近期想重新打开之前的项目，看看之前项目成果，是否还有哪些值得学习借鉴或者改进的地方，但原项目 git 权限已无，本地保存的还有原项目备份，但是没有 node_modules 文件夹的，所以需要 npm install 安装一下依赖，但是始终安装不成功，一直报下面的错误（换了 cnpm 和 yarn 安装 也是报类似错误）。

问题描述

报错如下：

npm WARN …………
npm WARN deprecated svgo@1.2.2: This SVGO version is no longer supported. Upgrade to v2.x.x.
npm WARN deprecated tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.
npm WARN deprecated core-js@2.6.12: core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.

npm ERR! code 1
npm ERR! path D:\Gree_project\web_cloud_wms\node_modules\node-sass

npm ERR! command failed
npm ERR! command C:\Windows\system32\cmd.exe /d /s /c node scripts/build.js
npm ERR! Building: D:\nodejs\node.exe D:\Gree_project\web_cloud_wms\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   'D:\\nodejs\\node.exe',
npm ERR! gyp verb cli   'D:\\Gree_project\\web_cloud_wms\\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@16.18.1 | win32 | x64
npm ERR! gyp verb command rebuild []
npm ERR! gyp verb command clean []
npm ERR! gyp verb clean removing "build" directory
npm ERR! gyp verb command 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 (D:\Gree_project\web_cloud_wms\node_modules\which\which.js:13:12)
npm ERR! gyp verb `which` failed     at F (D:\Gree_project\web_cloud_wms\node_modules\which\which.js:68:19)
npm ERR! gyp verb `which` failed     at E (D:\Gree_project\web_cloud_wms\node_modules\which\which.js:80:29)
npm ERR! gyp verb `which` failed     at D:\Gree_project\web_cloud_wms\node_modules\which\which.js:89:16
npm ERR! gyp verb `which` failed     at D:\Gree_project\web_cloud_wms\node_modules\isexe\index.js:42:5
npm ERR! gyp verb `which` failed     at D:\Gree_project\web_cloud_wms\node_modules\isexe\windows.js:36:5
npm ERR! gyp verb `which` failed     at FSReqCallback.oncomplete (node:fs:202:21)
npm ERR! gyp verb `which` failed  python2 Error: not found: python2
npm ERR! gyp verb `which` failed     at getNotFoundError (D:\Gree_project\web_cloud_wms\node_modules\which\which.js:13:12)
npm ERR! gyp verb `which` failed     at F (D:\Gree_project\web_cloud_wms\node_modules\which\which.js:68:19)
npm ERR! gyp verb `which` failed     at E (D:\Gree_project\web_cloud_wms\node_modules\which\which.js:80:29)
npm ERR! gyp verb `which` failed     at D:\Gree_project\web_cloud_wms\node_modules\which\which.js:89:16
npm ERR! gyp verb `which` failed     at D:\Gree_project\web_cloud_wms\node_modules\isexe\index.js:42:5
npm ERR! gyp verb `which` failed     at D:\Gree_project\web_cloud_wms\node_modules\isexe\windows.js:36:5
npm ERR! gyp verb `which` failed     at FSReqCallback.oncomplete (node:fs:202: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` failed Error: not found: python
npm ERR! gyp verb `which` failed     at getNotFoundError (D:\Gree_project\web_cloud_wms\node_modules\which\which.js:13:12)
npm ERR! gyp verb `which` failed     at F (D:\Gree_project\web_cloud_wms\node_modules\which\which.js:68:19)
npm ERR! gyp verb `which` failed     at E (D:\Gree_project\web_cloud_wms\node_modules\which\which.js:80:29)
npm ERR! gyp verb `which` failed     at D:\Gree_project\web_cloud_wms\node_modules\which\which.js:89:16
npm ERR! gyp verb `which` failed     at D:\Gree_project\web_cloud_wms\node_modules\isexe\index.js:42:5
npm ERR! gyp verb `which` failed     at D:\Gree_project\web_cloud_wms\node_modules\isexe\windows.js:36:5
npm ERR! gyp verb `which` failed     at FSReqCallback.oncomplete (node:fs:202:21)
npm ERR! gyp verb `which` failed  python Error: not found: python
npm ERR! gyp verb `which` failed     at getNotFoundError (D:\Gree_project\web_cloud_wms\node_modules\which\which.js:13:12)
npm ERR! gyp verb `which` failed     at F (D:\Gree_project\web_cloud_wms\node_modules\which\which.js:68:19)
npm ERR! gyp verb `which` failed     at E (D:\Gree_project\web_cloud_wms\node_modules\which\which.js:80:29)
npm ERR! gyp verb `which` failed     at D:\Gree_project\web_cloud_wms\node_modules\which\which.js:89:16
npm ERR! gyp verb `which` failed     at D:\Gree_project\web_cloud_wms\node_modules\isexe\index.js:42:5
npm ERR! gyp verb `which` failed     at D:\Gree_project\web_cloud_wms\node_modules\isexe\windows.js:36:5
npm ERR! gyp verb `which` failed     at FSReqCallback.oncomplete (node:fs:202:21) {
npm ERR! gyp verb `which` failed   code: 'ENOENT'
npm ERR! gyp verb `which` failed }
npm ERR! gyp verb could not find "python". checking python launcher
npm ERR! gyp verb could not find "python". guessing location
npm ERR! gyp verb ensuring that file exists: C:\Python27\python.exe
npm ERR! gyp ERR! configure error
npm ERR! gyp ERR! stack Error: Can't find Python executable "python", you can set the PYTHON env variable.
npm ERR! gyp ERR! stack     at PythonFinder.failNoPython (D:\Gree_project\web_cloud_wms\node_modules\node-gyp\lib\configure.js:484:19)
npm ERR! gyp ERR! stack     at PythonFinder.<anonymous> (D:\Gree_project\web_cloud_wms\node_modules\node-gyp\lib\configure.js:509:16)
npm ERR! gyp ERR! stack     at callback (D:\Gree_project\web_cloud_wms\node_modules\graceful-fs\polyfills.js:306:20)
npm ERR! gyp ERR! stack     at FSReqCallback.oncomplete (node:fs:202:21)
npm ERR! gyp ERR! System Windows_NT 10.0.22621
npm ERR! gyp ERR! command "D:\\nodejs\\node.exe" "D:\\Gree_project\\web_cloud_wms\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
npm ERR! gyp ERR! cwd D:\Gree_project\web_cloud_wms\node_modules\node-sass
npm ERR! gyp ERR! node -v v16.18.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 complete log of this run can be found in:
npm ERR!     D:\nodejs\node_cache\_logs\2023-04-25T07_56_30_642Z-debug-0.log

原因分析：

提示：不要被这一堆报错提示误导，只需要定位到下面这几行代码做针对性分析：
npm ERR! code 1
npm ERR! path D:\Gree_project\web_cloud_wms\node_modules\node-sass

npm ERR! path D:\Gree_project\web_cloud_wms\node_modules\node-sass 得出是和 node-sass 这个依赖相关的错误提示，那会不会就是 node-sass 一直安装失败导致的呢？然后我就看了一下 package.json 里有这个依赖项，我就先把这个依赖删除，再 npm install 就成功了，就此确定了我的猜想，就是 node-sass 一直安装不成功，不成功的原因是项目以前需要的 node-sass 版本和我现在的开发环境（node.js版本）不兼容的原因了，因为以前这个版本安装是没问题的，package.json 还是原来的版本，没有改动过，唯一变动的就是我本地的 node.js(v16.x) 和 npm(v8.x) 版本。

下面是我本地的 package.json 中的依赖版本：

"dependencies": {
    "axios": "0.18.1",
    "crypto-js": "^4.1.1",
    "echarts": "4.2.1",
    "element-china-area-data": "^5.0.1",
    "element-ui": "^2.15.6",
    "file-saver": "^2.0.2",
    "gulp": "^4.0.2",
    "gulp-clean-css": "^4.3.0",
    "gulp-css-wrap": "^0.1.2",
    "js-cookie": "2.2.0",
    "normalize.css": "7.0.0",
    "nprogress": "0.2.0",
    "path-to-regexp": "2.4.0",
    "qrcodejs2": "^0.0.2",
    "sortablejs": "1.8.4",
    "vue": "2.6.10",
    "vue-count-to": "1.0.13",
    "vue-i18n": "7.3.2",
    "vue-router": "3.0.6",
    "vuex": "3.1.0",
    "wangeditor": "^4.0.5",
    "xlsx": "^0.15.6"
  },
  "devDependencies": {
    "@babel/core": "7.0.0",
    "@babel/register": "7.0.0",
    "@vue/cli-plugin-babel": "4.5.0",
    "@vue/cli-plugin-eslint": "^4.5.0",
    "@vue/cli-plugin-unit-jest": "3.6.3",
    "@vue/cli-service": "3.6.0",
    "@vue/test-utils": "1.0.0-beta.29",
    "autoprefixer": "^9.5.1",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "10.1.0",
    "babel-jest": "23.6.0",
    "chalk": "2.4.2",
    "connect": "3.6.6",
    "element-theme-chalk": "^2.13.2",
    "eslint": "6.7.2",
    "eslint-plugin-vue": "7.0.0",
    "html-webpack-plugin": "3.2.0",
    "less": "^3.12.2",
    "less-loader": "^7.0.0",
    "mockjs": "1.0.1-beta3",
    "node-sass": "^4.14.1",
    "runjs": "^4.3.2",
    "sass-loader": "^7.1.0",
    "script-ext-html-webpack-plugin": "2.1.3",
    "script-loader": "0.7.2",
    "serve-static": "^1.13.2",
    "svg-sprite-loader": "4.1.3",
    "svgo": "1.2.2",
    "vue-template-compiler": "2.6.10"
  },

注：我的项目里 node-sass 和 sass-loader 是安装在了 devDependencies 里面，所以下面 npm 安装指令后面都加了 -D

dependencies 和 devDependencies 的区别：
dependencies：指定运行该应用程序所需的依赖项，这些依赖项在生产环境中需要被安装和使用。
devDependencies：指定开发该应用程序所需的依赖项，这些依赖项只在开发阶段需要被安装和使用，不会被部署到生产环境中。
因此，在实际项目中，通常将生产环境需要的依赖项放入 dependencies 字段，而将开发工具、测试框架等只在开发阶段需要的依赖项放入 devDependencies 字段。这样可以避免在生产环境中不必要地安装或使用一些开发时需要的库或工具，减小项目打包后的体积。

解决方案：

  1. 首先通过 node -v 和 npm -v 分别查看当前安装的 node.js、npm 版本，再按照匹配表看这两者版本是不是相匹配的。
    在这里插入图片描述
    注：本地安装的 node.js 和 npm 大版本最好是相匹配的，否则在 npm install 安装依赖时会遇到很多一些兼容性问题，导致安装不成功。
    上面是我本地的 node.js(v16.18.1) 和 npm(v8.19.2) 版本号，大版本相匹配。排除 node.js 和 npm 版本不兼容问题。
    node.js 和 配套 npm 版本对照表
    在这里插入图片描述

  2. 确认 node-sass 和 node.js 版本是否相匹配。查阅对照表：
    请注意，这只是一份大致的参考表，因为某些版本之间也可能存在不兼容性。建议查看每个模块的官方文档以获得更准确的信息。
    在这里插入图片描述

项目 package.json 中 node-sass 安装的是 4.14.1 版本，和我当前 node.js 16.18.1 不匹配，所以需要升级 node-sass 版本（npm install -D node-sass@8.0.0 我安装的是8.0.0版本），sass-loader 也需要做升级，这两个依赖是相关联的，但是升级 sass-loader 时遇到了如下问题：

$ npm install -D sass-loader
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: cloud-wms-ui@0.0.1
npm ERR! Found: webpack@4.46.0
npm ERR! node_modules/webpack
npm ERR!   peer webpack@"^4.0.0" from @intervolga/optimize-cssnano-plugin@1.0.6
npm ERR!   node_modules/@intervolga/optimize-cssnano-plugin
npm ERR!     @intervolga/optimize-cssnano-plugin@"^1.0.5" from @vue/cli-service@3.6.0
npm ERR!     node_modules/@vue/cli-service
npm ERR!       peer @vue/cli-service@"^3.0.0 || ^4.0.0-0" from @vue/cli-plugin-babel@4.5.0
npm ERR!       node_modules/@vue/cli-plugin-babel
npm ERR!         dev @vue/cli-plugin-babel@"4.5.0" from the root project
npm ERR!       2 more (@vue/cli-plugin-eslint, the root project)
npm ERR!   peer webpack@"^4.0.0 || ^5.0.0" from @soda/friendly-errors-webpack-plugin@1.8.1
npm ERR!   node_modules/@soda/friendly-errors-webpack-plugin
npm ERR!     @soda/friendly-errors-webpack-plugin@"^1.7.1" from @vue/cli-service@3.6.0
npm ERR!     node_modules/@vue/cli-service
npm ERR!       peer @vue/cli-service@"^3.0.0 || ^4.0.0-0" from @vue/cli-plugin-babel@4.5.0
npm ERR!       node_modules/@vue/cli-plugin-babel
npm ERR!         dev @vue/cli-plugin-babel@"4.5.0" from the root project
npm ERR!       2 more (@vue/cli-plugin-eslint, the root project)
npm ERR!   18 more (@vue/cli-plugin-babel, @vue/cli-plugin-eslint, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! dev sass-loader@"*" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: webpack@5.80.0
npm ERR! node_modules/webpack
npm ERR!   peer webpack@"^5.0.0" from sass-loader@13.2.2
npm ERR!   node_modules/sass-loader
npm ERR!     dev sass-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 D:\nodejs\node_cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     D:\nodejs\node_cache\_logs\2023-04-25T10_08_26_043Z-debug-0.log

由于没有指出安装 sass-loader 的具体版本，默认安装的 13.2.2 最新版需要 webpack 5.x 以上支持，而我本地的 webpack 是 4.x ，于是我就指定了 sass-loader 版本为 10，使用指令：npm install sass-loader@10 -D

下面是 node-sass 和 sass-loader 版本对照表，上面未指定 sass-loader 版本时默认安装最新版就会失败，可能也是 node-sass 8.0.0 和 sass-loader 13.2.2 版本不匹配原因。
请注意，这只是一份大致的参考表，因为某些版本之间也可能存在不兼容性。建议查看每个模块的官方文档以获得更准确的信息。
在这里插入图片描述

总结：

  1. 删除 node_modules 文件夹，将 package.json 中的 node-sass 和 sass-loader 依赖项删除。
  2. 安装所有依赖：npm install
  3. 安装 node-sass：npm install node-sass -D (未指定版本安装失败时，再按照对照表指定当前 node.js 版本所匹配的 node-sass 版本进行安装，node.js 16.x 对照的版本是 node-sass 8.x， 我这里未指定版本，自动给我匹配的 8.0.0 版本)
  4. 安装 sass-loader： npm install sass-loader@10 -D （因为我的 node-sass 是 8.0.0 版本，所以安装的是 10.x 版本）
    最后问题解决，项目不再报错，成功运行。
转载请注明出处或者链接地址：https://www.qianduange.cn//article/8763.html
标签
chatgpt人工智能webpack
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

2024-08-27 09:08:17

前端提高篇（102）：jQuery高级方法callbacks、deferred

2024-05-09 11:05:34

解决npm install 报错 “npm err code 1“

2024-06-06 10:06:47

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

2024-04-22 09:04:34

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

2024-03-29 15:03:20

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

2024-04-20 17:04:38

JQuery中的load()、$

2024-05-10 08:05:15

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

2024-10-30 21:10:12

基于Java SpringBoot Vue HTML5药店管理系统(源码 LW 调试文档 讲解等)/药店管理软件/药店进销存系统/药店库存管理系统/药店销售系统/药品管理系统/药店收银系统

2024-11-10 09:11:04

基于Java SpringBoot Vue HTML5宠物健康顾问系统(源码 LW 调试文档 讲解等)/宠物健康/顾问系统/宠物护理/宠物医疗/宠物保健/宠物咨询/宠物医生/宠物健康管理/宠物健康服务

2024-11-10 09:11:50

大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS常用属性（文本属性）

2024-11-04 09:11:111000
3

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
4

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
5

vue使用datav echarts

2024-09-06 00:09:381000
6

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
7

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
8

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
9

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
10

npm的使用

2024-08-18 00:08:131000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！