vue 报错 RangeError: Maximum call stack size exceeded

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

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

问题描述

  1. vue 脚手架启动项目
  1. 路由页面空白
  1. 控制台报错 1:[Vue warn]: Error in nextTick: "RangeError: Maximum call stack size exceeded"
  1. 控制台报错 2:RangeError: Maximum call stack size exceeded

错误截图:

问题原因

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

  1. 路由页面 views/index.vue 中的 name: 'Home'
  1. 页面中使用组件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/

如果您觉得文章不错,可以点击文章中的广告支持一下!