Vue 报错Failed to mount component: template or render function not defined

简介: Vue 报错Failed to mount component: template or render function not defined

Vue2使用的过程中报错误Failed to mount component: template or render function not defined

20210527153548522.png大概遇到有以下几种情况,简单记录一下。。。

1、页面引用组件时

先看一下当前的目录结构

20210527153548522.png

当前页面的目录结构是vipTag/index.vue主页面;component下的tagRoule.js、tagRoule.scss和tagRoule.vue等组成的组件,因为当前组件逻辑,样式部分比较长,所以做了一下拆分;这个时候我们回到vipTag/index.vue主页面 看一下import

20210527153548522.png

import tagRule from "./components/tagRule";这种情况就导致了无法识别具体引入的文件导致了报错误,改为import tagRule from "./components/tagRule.vue";即可

2、router/index.js路由引用页面时

错误示例

20210527153548522.png

上图所示,component: require('@/views/vipTag/index.vue') 当前的写法导致了报错


原因是:require 是 CommonJS 的模块导入方式,而组件定义时写的 export default 是 ES6 方式,因此require 导入的结果其实是一个含 default 属性的对象,所以 vue 中 component 用这个会报错,而恰好 vue 的命名视图组件注册用 components ,而合理的用法应该是require('xxx.vue').default 或是用 import

20210527153548522.png


相关文章
|
30天前
|
前端开发 JavaScript 开发者
|
3月前
|
JavaScript 前端开发
vue3通过render函数实现一个菜单下拉框
【8月更文挑战第18天】vue3通过render函数实现一个菜单下拉框
150 0
|
23天前
|
JavaScript 开发者
Vue Render函数
【10月更文挑战第11天】 Vue 的 Render 函数提供了一种强大而灵活的方法来创建虚拟 DOM 节点,使开发者能够更精细地控制组件的构建过程。通过 `createElement` 参数,可以动态生成各种元素和组件,实现复杂逻辑和高级定制。尽管使用 Render 函数需要更多代码和对虚拟 DOM 的深入理解,但它在处理复杂场景时展现出巨大的优势。
12 2
|
2月前
|
JavaScript
Vue+element_Table树形数据与懒加载报错Error in render: “RangeError: Maximum call stack size exceeded“
本文讨论了在使用Vue和Element UI实现树形数据和懒加载时遇到的“Maximum call stack size exceeded”错误,指出问题的原因通常是因为数据中的唯一标识符`id`不唯一,导致递归渲染造成调用栈溢出。
64 1
Vue+element_Table树形数据与懒加载报错Error in render: “RangeError: Maximum call stack size exceeded“
|
30天前
|
缓存 监控 JavaScript
如何提高 Vue Render 函数的性能?
【10月更文挑战第4天】
25 0
|
2月前
|
人工智能 JavaScript 索引
Duplicate keys detected: This may cause an update error.【Vue遍历渲染报错的解决】
这篇文章讨论了在Vue中进行列表渲染时遇到的“Duplicate keys detected”错误。这个错误通常发生在使用 `v-for` 指令渲染列表时,如果没有为每个循环项指定一个唯一的 `key` 属性,或者指定的 `key` 属性值重复了。文章提供了导致错误的原始代码示例,并给出了修正后的代码,通过在 `key` 绑定中加入索引确保 `key` 的唯一性。此外,文章还解释了为什么需要唯一 `key` 以及如何解决这个问题。
Duplicate keys detected: This may cause an update error.【Vue遍历渲染报错的解决】
|
26天前
|
JavaScript
Vue启动时报错的解决方案,以及解决相同路径跳转报错的问题
Vue启动时报错的解决方案,以及解决相同路径跳转报错的问题
188 0
|
30天前
|
JavaScript 开发者
Vue Render函数
【10月更文挑战第4天】
14 0
|
3月前
Vue3使用createVNode和render函数实现仿 Antd 加载动效
本文展示了如何在Vue3项目中使用`createVNode`和`render`函数实现一个仿Ant Design加载动效的自定义组件,并提供了详细的实现代码和使用示例。
145 0
Vue3使用createVNode和render函数实现仿 Antd 加载动效
|
JavaScript UED Windows
vue的学习之路(Vue中组件(component )
vue的学习之路(Vue中组件(component )
vue的学习之路(Vue中组件(component )