资讯专栏INFORMATION COLUMN

汇总Vue常见报错以及解决方案实例

3403771864 / 240人阅读

  前言

  学习中有一种方式就是错题汇总,在学习代码,日常书写代码中对于遇到报错,也要汇总,这样可以在以后编码过程中避免或解决这些问题。

  一、报错结构

  首先对于报错分为:错误类型、错误位置、错误描述、错误规则和问题数量。

1.png

  如上图:

  报错类型为编译错误;

  错误位置在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

  空格混合使用了

2.png

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

  Unexpected keyword 'const'

  没有预料到的关键字const

3.jpg

  详细看上述几行代码,可以观察到 53行结尾的应为分号写成了逗号

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

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

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

  在D:\myel\src\router

4.png

  一般对于这种情况就是路由器路径错误。

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

  Element is missing end tag

  这里就是元素缺少一个结束标签

5.png

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

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

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

  不能读取undefined的属性

6.png

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

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

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

  TypeError: ...forEach is not a function

  ...没有forEach方法

6.jpg

  由此可见当前数组不是数据

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

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

  ...没有定义

7.png

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

        以上就是关于 Vue常见报错的汇总,您要是遇见其他报错也会留言一起讨论。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/130287.html

相关文章

  • JavaScript 调试见报以及修复方法

    (看到一篇调试JS很有用的文章,收藏一下) JavaScript 调试是一场噩梦:首先给出的误非难以理解,其次给出的行号不总有帮助。有个查找误含义,及修复措施的列表,是不是很有用? 以下是奇怪的 JavaScript 误列表...

    zhongmeizhi 评论0 收藏0
  • 前端补集 - 收藏集 - 掘金

    ...个异步操作,然后为了解决回调地域的痛点,出现了一些解决方案比如事件订阅/发布的、事件监听的方式,再后来出现了Promise、Generator、asy... 闭包详解 - 前端 - 掘金闭包的形成跟变量的作用域以及变量的生存周期密切先关。 ...

    YorkChen 评论0 收藏0
  • 前端补集 - 收藏集 - 掘金

    ...个异步操作,然后为了解决回调地域的痛点,出现了一些解决方案比如事件订阅/发布的、事件监听的方式,再后来出现了Promise、Generator、asy... 闭包详解 - 前端 - 掘金闭包的形成跟变量的作用域以及变量的生存周期密切先关。 ...

    AbnerMing 评论0 收藏0
  • python包相对导入

    ... SystemError: Parent module "" not loaded, cannot perform relative import 解决方案: 建立示例文件结构如下:注:以/结尾的为文件夹。 /home/zhkai/ mobike/ __init__.py utils.py data_process/ ...

    crossoverJie 评论0 收藏0
  • vue 开发中遇到的问题汇总(踩坑指南)

    ...程序化地清理我们建立的所有东西。 Vue官方文档给出的解决方案是,在定义timer的时候使用$once指令监听beforeDestroy这个钩子函数。具体代码为: methods:{ onStartTimer(){ const timer = setInterval( () => { // 执...

    wean 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<