解决卸载node升级到node12版本后踩坑sass-loader和node-sass版本冲突的问题

因为项目发展需求，版本不能只停留在node12，必须要更新。

在学校安装的node，是这个版本

我的硬件是win10

然后我隔壁同事先更新node16版本，结果报错浪费了一下午的时间都没有解决，又装回12的去了。那时的我还没更新，后来一个男同事帮她装，解决了她遇到的问题。

我刚开始也以为到控制面板这里卸载node就可以了。

 

后来边做我的事情，边听，原来是因为卸不干净，导致下载下来的node12的node_module重复了。

那么卸载node并升级node的完整步骤如下

1、先卸载node

2、然后检查是否有一下文件夹，若有，就删除

1. c://user/xxx/node_models
2. c://Program Fiels/nodejs
3. c://user/xxx/AppData/Roaming/npm
4. c://user/xxx/AppData/Roaming/npm-cache

3、到官网找到对应windows的node16版本下载，

 像上面.msi的一个包。下载安装后自动配置环境变量。如果是.zip的压缩包，则需自己配置。

4、安装node

 点击下载好的安装包，一路next，安装路径可以根据自己的需求来改。

5、测试

在cmd命令下输入这两条语句

npm -v
node -v

 

 能正常看到就是下载成功了。

你以为到这了就完了吗，还没有。你下载好了，但是你还需要启动一下你的vue-cli项目

不启动不知道，一启动吓一跳。npm run serve后报了一大堆错。图如下

然后开始百度之旅，参照各个博主的解决办法。npm install 又 npm uninstall 还是出现一系列报错

 C:\WINDOWS\system32\cmd.exe /d /s /c node-gyp rebuild

npm ERR! code 1
npm ERR! path D:\Hhyp-work\新建文件夹\SVN\node_modules\node-sass
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c node-gyp rebuild
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp info using [email protected]
npm ERR! gyp info using [email protected] | win32 | x64
npm ERR! gyp ERR! find Python
npm ERR! gyp ERR! find Python Python is not set from command line or npm configuration
npm ERR! gyp ERR! find Python Python is not set from environment variable PYTHON
npm ERR! gyp ERR! find Python checking if "python3" can be used
npm ERR! gyp ERR! find Python - "python3" is not in PATH or produced an error
npm ERR! gyp ERR! find Python checking if "python" can be used
npm ERR! gyp ERR! find Python - "python" is not in PATH or produced an error
……
npm ERR! gyp ERR! configure error
npm ERR! gyp ERR! stack Error: Could not find any Python installation to use
npm ERR! gyp ERR! stack     at PythonFinder.fail (D:\Hhyp-work\新建文件夹\SVN\node_modules\node-gyp\lib\find-python.js:330:47)
npm ERR! gyp ERR! stack     at PythonFinder.runChecks (D:\Hhyp-work\新建文件夹\SVN\node_modules\node-gyp\lib\find-python.js:159:21)
npm ERR! gyp ERR! stack     at PythonFinder. (D:\Hhyp-work\新建文件夹\SVN\node_modules\node-gyp\lib\find-python.js:228:18)
npm ERR! gyp ERR! stack     at PythonFinder.execFileCallback (D:\Hhyp-work\新建文件夹\SVN\node_modules\node-gyp\lib\find-python.js:294:16)
npm ERR! gyp ERR! stack     at exithandler (node:child_process:406:5)
npm ERR! gyp ERR! stack     at ChildProcess.errorhandler (node:child_process:418:5)
npm ERR! gyp ERR! stack     at ChildProcess.emit (node:events:526:28)
npm ERR! gyp ERR! stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:289:12)
npm ERR! gyp ERR! stack     at onErrorNT (node:internal/child_process:478:16)
npm ERR! gyp ERR! stack     at processTicksAndRejections (node:internal/process/task_queues:83:21)
npm ERR! gyp ERR! System Windows_NT 10.0.19042
npm ERR! gyp ERR! command "D:\\Program Files\\nodejs\\node.exe" "D:\\Hhyp-work\\新建文件夹\\SVN\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild"
npm ERR! gyp ERR! cwd D:\Hhyp-work\新建文件夹\SVN\node_modules\node-sass
npm ERR! gyp ERR! node -v v16.14.2
npm ERR! gyp ERR! node-gyp -v v8.4.1
npm ERR! gyp ERR! not ok

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\晨洛溪月\AppData\Local\npm-cache\_logs\2022-04-05T09_59_20_049Z-debug-0.log

 Unsupported platform for [email protected]: wanted {"os":"darwin"} (current: {"os":"win32","arch":"x64"})

又尝试安装对应的版本，还是不行。

  ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/node-sass
npm ERR!   dev node-sass@"6.0.1" from the root project

甚至还想全局安装vue-cli

后来参考该博主的文章，按照它的方法终于成功了。

就是升级到node16后， 不要安装node-sass，安装sass就可以了，package.json如下：

 先后分别执行以下的脚本

npm uninstall sass-loader node-sass
npm install [email protected] [email protected]  --save-dev

然后启动就可以 了。

希望这些能帮助到你

解决问题过程中参考这两个博主的文章

nodejs的卸载及重装_strawberry_x的博客-CSDN博客_nodejs卸载https://blog.csdn.net/strawberry_x/article/details/113648770解决sass-loader和node-sass版本冲突问题（太难了）_胡庚申的博客-CSDN博客https://blog.csdn.net/qq_17555933/article/details/119463767?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~Rate-1.pc_relevant_paycolumn_v3&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~Rate-1.pc_relevant_paycolumn_v3&utm_relevant_index=2