Vue报错Syntax Error:TypeError: this.getOptions is not a function的解决方法

目录
  • 一、简单介绍
  • 二、报错现象
  • 三、问题分析
  • 四、问题处理
    • 1、查看 node 版本和 node-sass 版本依赖关系
    • 2、查看 当前 node 版本和 node-sass 版本是否符合依赖关系
    • 3、当前 node 版本和 node-sass 版本符合依赖关系,可能就是 sass-loader 版本过高,卸载 sass-loader
    • 4、尝试安装低版本的  sass-loader
    • 5、运行 vue 工程,顺利通过了
  • 总结

一、简单介绍

Vue 开发的一些知识整理,方便后期遇到类似的问题,能够及时查阅使用。

本节介绍,Vue 运行时报错  Syntax Error: TypeError: this.getOptions is not a function 的处理,如果有不足之处,欢迎指出,或者你有更好的方法,欢迎留言。

二、报错现象

ERROR  Failed to compile with 1 error                                                                                                                                       上午10:39:05

error  in ./src/views/Login.vue?vue&type=style&index=0&lang=scss&

Syntax Error: TypeError: this.getOptions is not a function
 @ ./node_modules/vue-style-loader??ref--8-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/post
css-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-opt
ions!./src/views/Login.vue?vue&type=style&index=0&lang=scss& 4:14-436 15:3-20:5 16:22-444
..............

三、问题分析

首先,检查代码,并没有什么错误的地方;其次,涉及到这个问题,可能就是版本原因了,安装的 sass-loader 版本太高,卸载安装低版本尝试一下。

四、问题处理

可能用到的命令:

  • 查看 node 版本命令:node -v
  • 查看 node-sass 等版本信息:npm list
  • 卸载 sass-loader 命令:npm uninstall --save sass-loader
  • 卸载 ode-sass 命令:npm uninstall --save node-sass
  • 安装低版本 sass-loader  的命令:npm i -D sass-loader@10.x
  • 安装低版本 node-sass  的命令:npm i node-sass@4.14.1
  • 运行 Vue 命令:npm run serve

1、查看 node 版本和 node-sass 版本依赖关系

参考网址:GitHub - sass/node-sass: Node.js bindings to libsass

2、查看 当前 node 版本和 node-sass 版本是否符合依赖关系

查看 node 版本命令:node -v

查看 node-sass 等版本信息:npm list

3、当前 node 版本和 node-sass 版本符合依赖关系,可能就是 sass-loader 版本过高,卸载 sass-loader

卸载 sass-loader 命令:npm uninstall --save sass-loader

4、尝试安装低版本的  sass-loader

这里降到 10.x 版本试试,你也可试试 11.x 版本先

安装低版本 sass-loader  的命令:npm i -D sass-loader@10.x

5、运行 vue 工程,顺利通过了

(如果你的还是有问题,可以试试在降低,同时也可对应降低 node-sass 试试,若再有,可以尝试找找其他原因)

运行 Vue 命令:npm run serve

总结

到此这篇关于Vue报错Syntax Error:TypeError: this.getOptions is not a function的文章就介绍到这了,更多相关Vue报错Syntax Error:TypeError内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Vue项目报错:Uncaught SyntaxError: Unexpected token <

    遇到问题: 今天做一个 VUE 的项目,在引入第三方依赖的 JS 文件时,遇到了一个问题: 控制台的提示:Uncaught SyntaxError: Unexpected token < 按照提示进入文件,再看如下图: 仔细看了看 index.html 文件,发现原本我的 JS 文件是放在 /src/utils 文件夹下的,但引入 /src 和 /static 的文件是有区别的. 解决方案: 解决办法是将第三方依赖的 JS 文件放到 /static/utils 目录下,引入路径也改成:<scr

  • vue-cli 打包后提交到线上出现 "Uncaught SyntaxError:Unexpected token" 报错

    前言: 项目使用vue-cli版本2.9.3 ,vue-router使用webpackChunkName实现按需加载. BUG描述:该报错在项目上线一段时间后,有用户反映页面无法正常游览 (后面以问题1/问题2区分) 问题1.导航点击无法正常跳转,console打印:Error:Loading chunk {n} failed. 报错截图 问题2.页面全白,console打印:Uncaught SyntaxError:Unexpected token < 报错截图: 经过一番折腾,初步定位问题1

  • 解决VUE项目在IIS部署出现:Uncaught SyntaxError: Unexpected token < 报错

    一.第一个解决方法是把mode改成history这个问题就会消失 二.第二个解决方法是publicPath设置成’/’,不能是’./’ const publicPath=''; module.exports = { // publicPath: process.env.NODE_ENV === 'production' ? '/lucky-draw' : '/' publicPath: `/${publicPath}` }; 三.报错404 Not Found,请重写url 在IIS正常部署完v

  • Vue报错Syntax Error:TypeError: this.getOptions is not a function的解决方法

    目录 一.简单介绍 二.报错现象 三.问题分析 四.问题处理 1.查看 node 版本和 node-sass 版本依赖关系 2.查看 当前 node 版本和 node-sass 版本是否符合依赖关系 3.当前 node 版本和 node-sass 版本符合依赖关系,可能就是 sass-loader 版本过高,卸载 sass-loader 4.尝试安装低版本的  sass-loader 5.运行 vue 工程,顺利通过了 总结 一.简单介绍 Vue 开发的一些知识整理,方便后期遇到类似的问题,能够

  • Vue 报错TypeError: this.$set is not a function 的解决方法

    报错场景:将APi中得到的response数据,用Vue$set()使数据动态响应 报错代码: methods: { textTranslate: function (text, to) { $.ajax({ url: 'http://openapi.youdao.com/api', type: 'post', dataType: 'jsonp', data: { q: text, appKey: this.appKey, salt: this.salt, from: this.from, to

  • Android模拟器无法启动,报错:Cannot set up guest memory ‘android_arm’ Invalid argument的解决方法

    本文实例讲述了Android模拟器无法启动,报错:Cannot set up guest memory 'android_arm': Invalid argument的解决方法.分享给大家供大家参考,具体如下: [错误] 模拟器无法启动,报错:Cannot set up guest memory 'android_arm': Invalid argument [解决办法] 在AVD中(Android Virtual Device Manager)将模拟器的RAM调成512. 这里写图片描述 st

  • Python使用pip安装报错:is not a supported wheel on this platform的解决方法

    本文讲述了Python使用pip安装报错:is not a supported wheel on this platform的解决方法.分享给大家供大家参考,具体如下: 可能的原因1:安装的不是对应python版本的库,下载的库名中cp27代表python2.7,其它同理. 可能的原因2:这个是我遇到的情况(下载的是对应版本的库,然后仍然提示不支持当前平台) 在https://www.lfd.uci.edu/~gohlke/pythonlibs/#numpy中,我下载到的numpy库文件名: n

  • IDEA链接MySQL报错08001和连接成功后不显示表的问题及解决方法

    报错Connection to blog0@localhost failed. [08001] Could not create connection to database server. Attempted reconnect 3 times. Giving up. 解决办法:在url后面拼接?serverTimezone=UTC 连接成功后数据库不显示表 通过设置解决: scheme选择当前使用的数据库 到此这篇关于IDEA链接MySQL报错08001和连接成功后不显示表的问题及解决方法的

  • java报错:找不到或无法加载主类的解决方法简单粗暴

    当我们在windows系统下安装完jdk时,测试案例HelloWorld:运行java命令时报错:找不到或无法加载主类 解决方法: 1.首先检查是否编译通过,生成了.class字节码文件 如果没有生成.class字节码文件,则需要执行javac编译命令编译源文件. 执行命令javac H:\javatest\HelloWorld.java(javac表示jdk内置编译命令:H:\javatest\HelloWorld.java表示源文件所在路径,这里我的测试源文件是位于H盘下,自己决定) 2.如

  • Vue报错:Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#<Object>‘的解决方法

    发现问题 运行一下以前的一个Vue+webpack的 vue仿新闻网站  小项目,报错 由于自己vue学习不深入,老是这个报错,找了好久(确切的说是整整一下午^...^)才找到原因 -v- Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>' 点开错误的文件,标注错误的地方是这样的一段代码: import {normalTime} from './timeFormat';

  • npm install安装报错:gyp info it worked if it ends with ok的解决方法

    目录 1.可能原因1:node和node-sass版本冲突, 2.node.js卸载与安装 3.node-sass卸载安装, 4.安装好后对应版本的node和node-sass后启动 总结 前端vue新项目 npm install安装报错 gyp info it worked if it ends with ok 1.可能原因1:node和node-sass版本冲突, 对应的node和node-sass的版本如下 2.node.js卸载与安装 之前有安装过弄过node.js的 如果node.js

  • MySQL无法重启报错Warning: World-writable config file ‘/etc/my.cnf’ is ignored的解决方法

    问题分析 在关闭数据库的命令发现mysql关不了,提示Warning: World-writable config file '/etc/my.cnf' is ignored ,大概意思是权限全局可写,任何一个用户都可以写.mysql担心这种文件被其他用户恶意修改,所以忽略掉这个配置文件.这样mysql无法关闭. 下面看下整个过程 重启MySQL [root@ttlsa ~]# service mysqld stop Warning: World-writable config file '/e

  • Vue 报错Error: No PostCSS Config found问题及解决

    目录 Vue 报错Error: No PostCSS Config found 解决办法 Vue使用中报错处理ERROR Vue常见错误解析 Vue 报错Error: No PostCSS Config found 从git上 clone 下来的代码: npm install 安装依赖以后,启动服务,出现Error: No PostCSS Config found报错: npm run dev 解决办法 在项目根目录下创建postcss.config.js,配置内容如下:即可修复报错问题. mo

随机推荐