解决vue安装less报错Failed to compile with 1 errors的问题

 更新时间:2020年10月22日 09:58:37   作者:lilongwei4321  
这篇文章主要介绍了解决vue安装less报错Failed to compile with 1 errors的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

1、创建vue项目后安装less,执行 npm install less less-loader --save-dev

下载版本为:less-loader@6.1.0 , less@3.11.3,重启服务报错,报错信息如下:

2、报错原因 less 本版太高需要降低版本,执行代码

先移除之前版本:

npm uninstall less-loader

下载指定版本:

npm install less-loader@5.0.0 -D

3、重启代码就可以了,若还是报错可移除文件node_modules,重新下载cnpm install

补充知识:vue项目运行报错:94% asset optimization ERROR Failed to compile with 2 errors13:03:01 error in ./src/ba

使用vue编写的前端项目运行报错:

88% hashing
89% module assets processing
90% chunk assets processing
94% asset optimization ERROR Failed to compile with 2 errors13:03:01
error in ./src/base/components/head.vue
Module build failed: Error: Node Sass does not yet support your current environment: Windows 64-bit with Unsupported runtime (72)
For more information on which environments are supported please see:
https://github.com/sass/node-sass/releases/tag/v4.7.2
at module.exports (F:\teach\xcEdu\xcEduUI01\xc-ui-pc-sysmanage\node_modules\node-sass\lib\binding.js:13:13)
at Object.<anonymous> (F:\teach\xcEdu\xcEduUI01\xc-ui-pc-sysmanage\node_modules\node-sass\lib\index.js:14:35)
at Module._compile (internal/modules/cjs/loader.js:1156:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1176:10)
at Module.load (internal/modules/cjs/loader.js:1000:32)
at Function.Module._load (internal/modules/cjs/loader.js:899:14)
at Module.require (internal/modules/cjs/loader.js:1042:19)
at require (internal/modules/cjs/helpers.js:77:18)
at Object.<anonymous> (F:\teach\xcEdu\xcEduUI01\xc-ui-pc-sysmanage\node_modules\sass-loader\lib\loader.js:3:14)
at Module._compile (internal/modules/cjs/loader.js:1156:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1176:10)
at Module.load (internal/modules/cjs/loader.js:1000:32)
at Function.Module._load (internal/modules/cjs/loader.js:899:14)
at Module.require (internal/modules/cjs/loader.js:1042:19)
at require (internal/modules/cjs/helpers.js:77:18)
at loadLoader (F:\teach\xcEdu\xcEduUI01\xc-ui-pc-sysmanage\node_modules\loader-runner\lib\loadLoader.js:13:17)

@ ./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":false}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-1340bee1","scoped":true,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0&bustCache!./src/base/components/head.vue 4:14-395 13:3-17:5 14:22-403
@ ./src/base/components/head.vue
@ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0&bustCache!./src/module/home/page/home.vue
@ ./src/module/home/page/home.vue
@ ./src/module/home/router/index.js
@ ./src/base/router/index.js
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://localhost:11000 webpack/hot/dev-server ./src/main.js

error in ./src/module/home/page/home.vue

Module build failed: Error: Node Sass does not yet support your current environment: Windows 64-bit with Unsupported runtime (72)
For more information on which environments are supported please see:
https://github.com/sass/node-sass/releases/tag/v4.7.2
at module.exports (F:\teach\xcEdu\xcEduUI01\xc-ui-pc-sysmanage\node_modules\node-sass\lib\binding.js:13:13)
at Object.<anonymous> (F:\teach\xcEdu\xcEduUI01\xc-ui-pc-sysmanage\node_modules\node-sass\lib\index.js:14:35)
at Module._compile (internal/modules/cjs/loader.js:1156:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1176:10)
at Module.load (internal/modules/cjs/loader.js:1000:32)
at Function.Module._load (internal/modules/cjs/loader.js:899:14)
at Module.require (internal/modules/cjs/loader.js:1042:19)
at require (internal/modules/cjs/helpers.js:77:18)
at Object.<anonymous> (F:\teach\xcEdu\xcEduUI01\xc-ui-pc-sysmanage\node_modules\sass-loader\lib\loader.js:3:14)
at Module._compile (internal/modules/cjs/loader.js:1156:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1176:10)
at Module.load (internal/modules/cjs/loader.js:1000:32)
at Function.Module._load (internal/modules/cjs/loader.js:899:14)
at Module.require (internal/modules/cjs/loader.js:1042:19)
at require (internal/modules/cjs/helpers.js:77:18)
at loadLoader (F:\teach\xcEdu\xcEduUI01\xc-ui-pc-sysmanage\node_modules\loader-runner\lib\loadLoader.js:13:17)

出错原因就是sass不支持当前的环境,那么在当前环境重新安装一下就好了

1、查看本地nodejs的版本号和node-sass的版本号

node -v ---查看nodejs的版本号以及查看其是否安装

node-sass -v ---查看node-sass的版本号以及查看其是否安装

2.、卸载node-sass,但是如果卸载不成功,直接找到node-sass文件夹,删除

npm uninstall --save node-sass --记住执行这个命令前,需要先进入到对应的文件目录才可以删除

如图(如下图即可):

3、重新安装更新版本的node-sass即可

npm install --save node-sass (cnpm install --save node-sass )

(这个也要在指定文件夹执行,并进行本地安装)

这样就可以了!!!!!!!!!

如下图所示:

以上这篇解决vue安装less报错Failed to compile with 1 errors的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • watch(监视属性)和computed(计算属性)的区别及实现案例

    watch(监视属性)和computed(计算属性)的区别及实现案例

    watch和computed是vue实例对象中的两个重要属性,watch是监视属性,用来监视vue实例对象上属性和方法的变化,computed被称为计算属性,可以将data对象中的属性进行计算得到新的属性,这篇文章主要介绍了watch(监视属性)和computed(计算属性)的区别,需要的朋友可以参考下
    2023-05-05
  • vscode中prettier和eslint换行缩进冲突的问题

    vscode中prettier和eslint换行缩进冲突的问题

    这篇文章主要介绍了vscode中prettier和eslint换行缩进冲突的问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • vue router进行路由跳转并携带参数的实例详解(params/query)

    vue router进行路由跳转并携带参数的实例详解(params/query)

    在使用`router.push`进行路由跳转到另一个组件时,可以通过`params`或`query`来传递参数,这篇文章主要介绍了vue router进行路由跳转并携带参数(params/query),需要的朋友可以参考下
    2023-09-09
  • springboot+VUE实现登录注册

    springboot+VUE实现登录注册

    这篇文章主要为大家详细介绍了springboot+VUE实现登录注册,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-05-05
  • Vite配置路径别名的简单实现方法

    Vite配置路径别名的简单实现方法

    Vite项目中我们可以手动将src路径设置**@**路径别名,可以省下很多引入路径的冗余路径,下面这篇文章主要给大家介绍了关于Vite配置路径别名的简单实现方法,需要的朋友可以参考下
    2023-04-04
  • vue 项目地址去掉 #的方法

    vue 项目地址去掉 #的方法

    vue 项目往往会搭配 vue-router 官方路由管理器,它和 vue.js 的核心深度集成,让构建单页面应用变得易如反掌。这篇文章主要介绍了vue 项目地址去掉 #的方法,需要的朋友可以参考下
    2018-10-10
  • vue之Element-Ui输入框显示与隐藏方式

    vue之Element-Ui输入框显示与隐藏方式

    这篇文章主要介绍了vue之Element-Ui输入框显示与隐藏方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • Vue通过provide inject实现组件通信

    Vue通过provide inject实现组件通信

    这篇文章主要介绍了Vue通过provide inject实现组件通信,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-09-09
  • vue实现简单无缝滚动效果

    vue实现简单无缝滚动效果

    这篇文章主要为大家详细介绍了vue实现简单无缝滚动效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • vue 动态设置img的src地址无效,npm run build 后找不到文件的解决

    vue 动态设置img的src地址无效,npm run build 后找不到文件的解决

    这篇文章主要介绍了vue 动态设置img的src地址无效,npm run build 后找不到文件的解决,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07

最新评论