vue中webpack和less填坑:项目运行起来报错TypeError: this.getOptions is not a function
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了vue中webpack和less填坑:项目运行起来报错TypeError: this.getOptions is not a function,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2298字,纯文字阅读大概需要4分钟。
内容图文
好久没怎么用less了,今天在vue项目中突然想用less来改轮播图的样式,做一个穿透。折腾几何,昏昏欲死,历经各番查阅,终于解决,此时心中飞过无数省略号!
下面细说一下经历和填坑记录:
我使用的vue版本是2.5.2,webpack版本是3.6.0,注意版本!之前本人尝试升级过webpack4.0配合使用sass,因为使用sass必须安装node-sass和sass-loader,使用中发现webpack4.0对于sass存在兼容性问题,一般解决问题的方案是把node-sass降级处理。
此外,也发生过extract-text-webpack-plugin还不能支持webpack4.0.0以上的版本的情况,所以自行升级webpack4.0使用,问题还是比较多的。对于webpack大家要注意全局安装和本地安装的版本的一致性。
好了,话归正状,此处讨论less填坑。vue中使用less的流程:
安装less和less-loader => webapck中配置module模块下的rules数组项,新增对less文件的解析规则 => 组件中使用<style lang="less"></style>即可
注意注意,这三步过程中,你可能都会犯低级错误:
1.安装时,如果采用less和less-loader同时安装,请按rules里书写的相反顺序来安装,否则会报错!即npm i less less-loader -S为正解!npm i less-loader less-S为误操作!注意最好带上-S或-D,不带的话某些情况下会造成模块包依赖的无故丢失的未知错误! ==>解决方法一般是把项目依赖的包删了,重新yarn或者npm i 一下!
2.rules配置规则:浏览器是从你书写的末项loader到你书写的首项loader来解析的!rules是一个数组,数组成员为对象,每个对象里定义test的正则和使用的loader,有两种写法:
{test:/\.css/,use:['style-loader','css-loader',less-loader']} 或者 {test:/\.css/,loader:'style-loader!css-loader!less-loader'}
注意loader的顺序不能乱,从右往左解析,浏览器是先less-loader解析,不能解析再css-loader解,css-loader不行再style-loader出马,所以顺序乱了运行起来必然报错!
3.组件中使用时,切记:给style标签加上lang="less"属性,否则运行时,还是会报错!如果样式只作用于当前组件,不让它影响其他组件,就再在style标签上加上scoped属性!
以上三步我都无误,但是运行就报错了,因为脚手架自动安装的less-loader版本是8.x的版本了,所以一运行起来就又报错:
TypeError: this.getOptions is not a function xxxxxxxxx……(此处省略老妈妈的裹脚——又臭又长)
解决方案:把less-loader卸载后降级换成5.0的版本!注意less是生产环境使用,线上环境不需要,故用--save-dev,具体操作如下:
npm uninstall less-loader ,再 npm i less-loader@5.0 -D。
此外,swiper插件使用过程中发现6.0以上版本国内还没有成熟文档指引,所以最好还是使用5.x的版本,推荐安装5.4.5的版本,即npm i swiper@5.4.5 -S即可。
至此,填坑完毕!npm run dev原地满血复活!
内容总结
以上是互联网集市为您收集整理的vue中webpack和less填坑:项目运行起来报错TypeError: this.getOptions is not a function全部内容,希望文章能够帮你解决vue中webpack和less填坑:项目运行起来报错TypeError: this.getOptions is not a function所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。