Vue常见报错问题怎么解决

今天小编给大家分享一下Vue常见报错问题怎么解决的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。

一、报错结构

报错信息一般会包含这几部分:错误类型、错误位置、错误描述、错误规则和问题数量。

Vue常见报错问题怎么解决  vue 第1张

如上图:

报错类型为编译错误;

错误位置在D:\myel\src\views\admin\AdminView.vue中的第四行第2个字符;(报错位置不一定每次都是准确的,但是可以根据提示缩小范围)

错误描述 当前错误Mixed spaces and tabs指space空格和tab空格混合了(可根据翻译来判断错误);

错误规则 no-mixed-spaces-and-tabs指space空格和tab空格不能混合使用;

错误数量 统计当前有几个报错 error需要解决,warning根据实际情况看需不需要立即解决。

二、常见问题总结及解决方法

Mixed spaces and tabs

空格混合使用了

Vue常见报错问题怎么解决  vue 第2张

解决方法:1、在当前页面格式化代码 2、在.eslintrc.js文件的rules中添加"no-mixed-spaces-and-tabs": "off"

Unexpected keyword 'const'

没有预料到的关键字const

Vue常见报错问题怎么解决  vue 第3张

仔细看这几行代码就可以发现, 53行结尾的应为分号写成了逗号

解决办法:将53行逗号改为分号

Module not found: Error: Can't resolve '....' in '....'

模块找不到:不能resolve(兑现,发现,解决)../views/admin/DashVeiw.vue

在D:\myel\src\router

Vue常见报错问题怎么解决  vue 第4张

 这种情况一般是路由中配置的文件路径写错了

解决办法:将路径改为正确路径(小技巧:使用自动提示的路径或者复制文件名,避免手误打错)

 Element is missing end tag

元素缺少一个结束标签

Vue常见报错问题怎么解决  vue 第5张

是当前文件的<div class="login">缺少后半个</div>

 解决方法:分析好html的结构,将缺少的结束标签添加上

TypeError: Cannot read properties of undefined (reading '...') 

不能读取undefined的属性

Vue常见报错问题怎么解决  vue 第6张

 原因是挂载时有dom节点但是数据还没获取,当时那个数据可能为空

解决方法:在当前标签(同时用了v-for的话就上一级标签)加上v-if判断该数据是否存在

用[]或.指定数据时都可能会出现这个错误,要记得使用v-if

TypeError: ...forEach is not a function

...没有forEach方法

Vue常见报错问题怎么解决  vue 第7张

当前数据不是个数组

 解决方法:分析数据的结构,找到真正需要遍历的对象

'...' is not defined / no-undef

...没有定义

Vue常见报错问题怎么解决  vue 第8张

 解决办法:找到报错位置,按照提示导入相应关键字

以上就是“Vue常见报错问题怎么解决”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注蜗牛博客行业资讯频道。

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:niceseo99@gmail.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

评论

有免费节点资源,我们会通知你!加入纸飞机订阅群

×
天气预报查看日历分享网页手机扫码留言评论Telegram