vue 报错 RangeError: Maximum call stack size exceeded

时间：

分类：

vue

字数：

235 字

时长：

大约需要 1 分钟

次数：

0 人阅读

编程就是不断踩坑的旅途，这不就发现一个不太常见的坑：

vue 运行报错： RangeError: Maximum call stack size exceeded

问题描述

  1. vue 脚手架启动项目

  2. 路由页面空白

  3. 控制台报错 1：[Vue warn]: Error in nextTick: "RangeError: Maximum call stack size exceeded"

  4. 控制台报错 2：RangeError: Maximum call stack size exceeded

错误截图：

问题原因

这儿仅介绍本人踩到的坑，必然还有其他坑会导致以上问题。

  1. 路由页面 views/index.vue 中的 name: 'Home'

  2. 页面中使用组件Home

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <template>
      <Home />
    </template>

    <script>
    export default {
      name: 'Home'
    }
    </script>

如果存在以上代码，那么项目运行就会报错 RangeError: Maximum call stack size exceeded。

原因是 template 中使用了跟当前 name 一样的名字，造成了循环引用，导致报错。

处理办法

修改 name 即可，当然也可以修改组件名字。

本文由 linx(544819896@qq.com) 创作，采用 CC BY 4.0 CN协议 进行许可。 可自由转载、引用，但需署名作者且注明文章出处。本文链接为： https://blog.jijian.link/2021-10-10/vue-range-error/

如果您觉得文章不错，可以请我喝一杯咖啡！

赏