一、问题描述
首先正常 yarn add .，发现依赖中node-sass无法正常安装导致编译中断，于是单独安装node-sass，报错如下
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
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 ERR! code 1 npm ERR! path E:\code\xxxxx_admin_web\node_modules\node-sass npm ERR! command failed npm ERR! command C:\Windows\system32\cmd.exe /d /s /c C:\Users\ADMINI~1\AppData\Local\Temp\postinstall-c9fb2595.cmd npm ERR! Building: D:\nodejs\node.exe E:\code\xxxxx_admin_web\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 'E:\\code\\\xxxxx_admin_web\\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.15.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 (E:\code\xxxxx_admin_web\node_modules\which\which.js:13:12) npm ERR! gyp verb `which` failed at F (E:\code\xxxxx_admin_web\node_modules\which\which.js:68:19) npm ERR! gyp verb `which` failed at E (E:\code\xxxxx_admin_web\node_modules\which\which.js:80:29) npm ERR! gyp verb `which` failed at E:\code\xxxxx_admin_web\node_modules\which\which.js:89:16 npm ERR! gyp verb `which` failed at E:\code\xxxxx_admin_web\node_modules\isexe\index.js:42:5 npm ERR! gyp verb `which` failed at E:\code\xxxxx_admin_web\node_modules\isexe\windows.js:36:5 npm ERR! gyp verb `which` failed at FSReqCallback.oncomplete (node:fs:198:21) npm ERR! gyp verb `which` failed python2 Error: not found: python2 npm ERR! gyp verb `which` failed at getNotFoundError (E:\code\xxxxx_admin_web\node_modules\which\which.js:13:12) npm ERR! gyp verb `which` failed at F (E:\code\xxxxx_admin_web\node_modules\which\which.js:68:19) npm ERR! gyp verb `which` failed at E (E:\code\xxxxx_admin_web\node_modules\which\which.js:80:29) npm ERR! gyp verb `which` failed at E:\code\xxxxx_admin_web\node_modules\which\which.js:89:16 npm ERR! gyp verb `which` failed at E:\code\xxxxx_admin_web\node_modules\isexe\index.js:42:5 npm ERR! gyp verb `which` failed at E:\code\xxxxx_admin_web\node_modules\isexe\windows.js:36:5 npm ERR! gyp verb `which` failed at FSReqCallback.oncomplete (node:fs:198: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` succeeded python C:\Program Files\python\python.EXE npm ERR! gyp ERR! configure error npm ERR! gyp ERR! stack Error: Command failed: C:\Program Files\python\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:398:12) npm ERR! gyp ERR! stack at ChildProcess.emit (node:events:527:28) npm ERR! gyp ERR! stack at maybeClose (node:internal/child_process:1092:16) npm ERR! gyp ERR! stack at Process.ChildProcess._handle.onexit (node:internal/child_process:302:5) npm ERR! gyp ERR! System Windows_NT 10.0.18363 npm ERR! gyp ERR! command"D:\\nodejs\\node.exe""E:\\code\\\xxxxx_admin_web\\node_modules\\node-gyp\\bin\\node-gyp.js""rebuild""--verbose""--libsass_ext=""--libsass_cflags=""--libsass_ldflags=""--libsass_library=" npm ERR! gyp ERR! cwd E:\code\xxxxx_admin_web\node_modules\node-sass npm ERR! gyp ERR! node -v v16.15.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! C:\Users\Administrator\AppData\Local\npm-cache\_logs\2022-10-09T03_11_39_887Z-debug-0.log |
这种情况我们一般都只会说依赖出现问题了。按常规的方法，删除依赖，重新安装
而对出现报错的归因解释得通俗易懂的，可以参考——思否-npm i 运行错误 这个解答
是 node-sass 的问题，这是一个 native 包，默认情况下每个 node 版本都需要单独的 node-sass，一般会从 github release 上下载，你的node版本是 v16.xx.xx ，github release 没有这个版本，所以会转向本地构建，本地构建需要 windows build tools，简单说就是需要安装 visual studio 2019。安装这个后你的环境变量里就可以使用 python 等命令，但是明显你没有，所以会报错
所以针对这个问题，有两种解决思路
二、解决方案
（一）、node降级（不推荐）
node切换为v12或者v14的版本
（二）、处理依赖
对依赖的处理方式也有两种方式
参考 CSDN-node16 node-sass 版本
方式一、替换依赖
卸载旧版本的node-sass和sass-loader，安装sass和sass-loader，不再使用node-sass
|
1 2 |
npm uninstall sass-loader node-sass npm install sass-loader@8.0.2 sass@1.26.5 -D |
方式二、安装指定版本依赖
安装node16+相对应版本的node-sass和sass-loader
|
1 |
npm i node-sass@6.0.1 sass-loader@10.2.0 |
如果使用方法二之后报错，可能是安装过程中某些包丢失，尝试以下方法解决：
|
1 |
npm rebuild node-sass |
## 根据自己使用的nodejs版本情况，选择node-sass和sass-loader对应的版本。
>node 12.x-14.x版本对应如下sass版本：
node-sass@4.14.1 (全局安装使用，不用安装到项目)：npm install node-sass@4.14.1 -g
sass-loader@8.0.2 (全局安装使用，不用安装到项目)：npm install sass-loader@8.0.2 -g
dart-sass@1.25.0 (项目中)：npm intsall dart-sass@1.25.0
>node 16.x版本对应如下sass版本：
node-sass@6.0.1 (全局安装使用，不用安装到项目)：npm install node-sass@6.0.1 -g
sass-loader@10.2.1 (全局安装使用，不用安装到项目)：npm install sass-loader@10.2.1 -g
dart-sass@1.25.0 (项目中)：npm intsall dart-sass@1.25.0
解决了Cannot read properties of undefined (reading ‘parseComponent‘）
Vue中eslint报错的修改，绝对有效！！！
Syntax Error: TypeError: Cannot read properties of undefined (reading 'parseComponent')
You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.
1
2
3
4
5
方法一：
1.找到文件 .eslintrc.js文件,如下图，把 '@vue/standard’注释掉
方法二：
1.找到文件 vue.config.js
修改lintOnSave 为false，如果没有就添加vue.config.js这个文件并把 lintOnSave 设置为false
方法三：
就是所谓的在build/webpack.base.conf.js文件中，注释或者删除掉：module->rules中有关eslint的规则，（我有这个文件但是内容空空白白，然并软，这张图复制别人的，位置就是那里）
方法四：
以上三种方式都无效的我，浪费一下午找的，最后差点信了有些人的鬼话想去卸载脚手架vue-cli，我真是服了那些出馊主意的人，最后这个方式解决了，
1、 yarn add vue-template-compiler
或 npm add vue-template-compiler
2、最后如果还是不行就再用
yarn upgrade –latest vue-template-compiler
npm upgrade –latest vue-template-compiler
最近多次遇到这个问题，node16+版本安装或者初始化带有node-sass和sass-loader包的项目报错。翻遍了所有相关文章，总结出以下两种解决办法：
方法一：
卸载旧版本的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
方法二：
安装node16+相对应版本的node-sass和sass-loader
npm i node-sass@6.0.1 sass-loader@10.2.0
如果使用方法二之后报错，可能是安装过程中某些包丢失，尝试以下方法解决：
npm rebuild node-sass