VUE项目无法启动NODE版本与NODE-SASS、SASS-LOADER版本不兼容解决方案

时间:2022-12-20 12:07:42

一、错误分析

在VUE项目开发中,我们经常会遇到报错:

Node Sass version 7.0.1 is incompatible with ^4.0.0。

网上解决方案也千奇百怪,最终操作下来,也是搞了个寂寞,项目依旧无法正常运行,通常这种情况普遍都是团队或者项目使用的NODE版本不一致。

二、版本比对

附npm官网:nodejs和node-sass关系对照表 

版本参考,具体以官网更新为准

VUE项目无法启动NODE版本与NODE-SASS、SASS-LOADER版本不兼容解决方案

 在VUE2.0项目中我们普遍使用nodeJS(版本):14 ,  node-sass(版本):4.14+, webpack

 在VUE3.0项目中我们普遍是nodeJS(版本):最新长期稳定版本16+,  node-sass(版本):7+,vite

 查看版本:

node -v

node-sass 请直接编辑工具搜索node-sass查看版本号

三、解决方案

 这里我推荐使用nvm(node版本管理工具)

nvm是一个node的版本管理工具,可以对多个node版本进行安装和切换。

 nvm安装包下载地址:https://github.com/coreybutler/nvm-windows/releases

 VUE项目无法启动NODE版本与NODE-SASS、SASS-LOADER版本不兼容解决方案

 安装vnm,傻瓜式操作,一直下一步直至结束

 查看vnm安装是否成功,win+r输入cmd回车

 输入命令:nvm

VUE项目无法启动NODE版本与NODE-SASS、SASS-LOADER版本不兼容解决方案

nvm安装node

安装(后面是版本号,版本查看地址:https://nodejs.org/en/download/releases/):

nvm install 14.19.0

查看是否安装成功

nvm list

VUE项目无法启动NODE版本与NODE-SASS、SASS-LOADER版本不兼容解决方案

 使用项目对应NODE版本(可以看到当前使用的版本前面有个*标识)

nvm use 14.19.0

VUE项目无法启动NODE版本与NODE-SASS、SASS-LOADER版本不兼容解决方案VUE项目无法启动NODE版本与NODE-SASS、SASS-LOADER版本不兼容解决方案

 切换对应版本切换镜像源(这里用的淘宝)

 打开nvm安装目录下的settings.txt文件,输入以下配置

node_mirror: https://npm.taobao.org/mirrors/node/
npm_mirror: https://npm.taobao.org/mirrors/npm/

VUE项目无法启动NODE版本与NODE-SASS、SASS-LOADER版本不兼容解决方案

 安装npm(部分版本安装node后没有一并安装npm,所以需要手动安装)、Yarn操作一致

 npm下载地址:http://npm.taobao.org/mirrors/npm/ (下载对应版本的zip文件)

 node版本对应npm版本:https://nodejs.org/zh-cn/download/releases/

 将文件解压到版本对应的 node_modules目录下,改名成npm

VUE项目无法启动NODE版本与NODE-SASS、SASS-LOADER版本不兼容解决方案VUE项目无法启动NODE版本与NODE-SASS、SASS-LOADER版本不兼容解决方案

 做完上面操作,还需要把npm文件夹bin目录下的npm和npm.cmd两个文件复制一份到对应node版本的根目录下。

 VUE项目无法启动NODE版本与NODE-SASS、SASS-LOADER版本不兼容解决方案

 查看版本是否安装成功

npm -v

VUE项目无法启动NODE版本与NODE-SASS、SASS-LOADER版本不兼容解决方案

 

这时候就可以根据项目实际情况使用对应版本号了