Vue报错

已于 2023-04-27 11:00:30 修改
阅读量265 收藏
点赞数
文章标签： vue.js javascript 前端
于 2023-04-27 08:45:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/clearlovel/article/details/130398326
版权

浏览器中会出现这种类型的报错

[Vue warn]: Failed to mount component: template or render function not defined.

found in

---> <Index> at src/views/car/allcar/index.vue
       <AppMain> at src/layout/components/AppMain.vue
         <ElScrollbar>
           <Layout> at src/layout/index.vue
             <App> at src/App.vue
               <Root>
 

经过查资料，反复查证回想改了什么，发现是因为昨天在在哪个页面组件目录（src\views\组件目录）里面新建了个index.js，so，现在这个组件目录下有一个index.vue和index.js，导致路由配置表里面引入组件的时候引入到了index.js没有引入到组件导致报错。

解决方法检查一下是不是根目录没有template标签，直接写view就会报错，文件名字不能一样

同名的文件最为容易报错尽量避免这个问题，出现了会导致加载路由失败渲染失败

1、index.js文件不要放在组件目录下或者改名字，2、路由表配置指定后缀，比如：component: () => import('@/views/subfile/index.vue')  就可以了。3、要在文件夹下要添加内容例如加入template

clearlovel
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
创建项目时VUE报错的解决办法
02-25
创建项目时VUE报错的解决办法
OrdosX#blog#electron-vue报错process-is-not-defined的解决方法1
07-25
首先打开.electron-vue/webpack.renderer.config.js，在大约第125行的new HtmlWebpackPlugin中任意位置
template or render function not defined
spark-chen的博客
05-24 2万+
有没有同学遇到这个问题呢？ 控制台 报错 template or render function not defined. 那是因为，你将vue-rotuer中的 component 定义错了 正确方法：component:()=>import("　") 错误方法：component:import("") 很明显，component 后面应该是一个箭头函数。 components VScomponent 同学们对于这两个有没有傻傻的分不清楚呢？ components官方...
vuecil报错：warning in ./src/plugins/element.jsexport ‘default‘ (imported as ‘Vue‘) was not found in ‘
had1695016179的博客
07-03 621
vue版本更新之后，npm run serve程序后会报错：warning in ./src/plugins/element.jsexport 'default' (imported as 'Vue') was not found in '。ps:如果创建Vue文件是vue2的版本，则没有以上问题，如果vue3的话则需要注意main.js文件里的代码。vue2里面，main.js文件里面是import Vue from 'vue'对于elementUI官网上面的element的组件列表的快速引入方式。
Failed to mount component: template or render function not defined异常的解决方案
最新发布
2301_79779756的博客
05-10 1165
在Vue.js框架中，组件是构建用户界面的基本单元。每个Vue组件都需要一个模板或渲染函数来定义其结构。当Vue尝试挂载一个组件，但找不到该组件的模板或渲染函数时，就会抛出“Failed to mount component: template or render function not defined”的错误。
页面报错（01）Failed to mount component: template or render function not defined.
热门推荐
dugujiuding的博客
10-17 5万+
[Vue warn]: failed to mount component: template or render function not defined.
Vue 报错Failed to mount component: template or render function not defined
程邓楠的博客
08-14 2万+
Vue2使用的过程中报错误Failed to mount component: template or render function not defined 大概遇到有以下几种情况，简单记录一下。。。 1、页面引用组件时 先看一下当前的目录结构 当前页面的目录结构是vipTag/index.vue主页面；component下的tagRoule.js、tagRoule.scss和tagRoule.vue等组成的组件，因为当前组件逻辑，样式部分比较长，所以做了一下拆分；这个时候我们回到vipT
Failed to mount component: template or render function not defined.
weixin_43968335的博客
06-23 541
Failed to mount component: template or render function not defined.
关于Vue引入组件后报错：Failed to mount component: template or render function not defined.
FuyuumiAI的博客
04-04 3万+
Failed to mount component: template or render function not defined. 问题描述 在引入所需组件时，出现以下错误。 自己猜测大概率是引入名称或者是引入方式出错了。然后就开始试验，果然，问题出在组件的引入方式上了，错误代码如下： <script> export default { data() { ...
Vue 报错TypeError: this.$set is not a function 的解决方法
10-17
在Vue.js框架中，`this.$set`是一个用于添加响应式属性的方法，它遵循Vue的依赖追踪机制，确保新添加的属性能够触发视图更新。然而，当你遇到`TypeError: this.$set is not a function`的错误时，通常是因为`this`上...
解决vue打包后刷新页面报错：Unexpected token <
10-16
主要介绍了解决vue打包后刷新页面报错：Unexpected token <相关知识点，需要的朋友们参考下。
解决[Vue warn]: Failed to mount component: template or render function not defined.
m012840的博客
10-20 1822
解决[Vue warn]: Failed to mount component: template or render function not defined.
Failed to mount component: template or render function not defined
weixin_43120901的博客
06-18 1520
错误原因 错误原因：图1，路由页面引入了@/views/Home/index 因为之前我所有的结构样式行为都是在一个文件，就叫做index.vue，因此引入时我省略了后缀名。 后来我的home下面的index.vue太大我拆成了index.js，index.vue,index.scss，三个文件，如图2，但是路由文件的路径我没有改，还是@/views/Home/index，因此它默认加载了js文件，所以就会报如标题这样的错误。说是没有template之类的。 注意，引入时还是带后缀比较保险。 ...
[Vue warn]: Failed to mount component: template or render function not defined.
yang_yue6889的博客
12-15 668
参考：https://www.cnblogs.com/kingjordan/p/12026983.html
vue 报错Failed to mount component: template or render function not defined.的解决方法
to_the_Future的博客
02-16 2290
之前的项目都没有问题，结果突然出现这个报错, 别的文件都正确,就是新建的一个组件报错 解决办法： 因为在router/index.js文件中，我是用的懒加载的写法，所以把文件后缀.vue跟上就好了 在新建好.vue文件后，引入新建文件时，该新建文件里面没有添加组件 内容 将内容包裹起来，就算没有写内容也必须添加该组件 ...
uniapp：[Vue warn]: Failed to mount component: template or render function not defined. found in
孙不坚1208
08-12 1901
在uniapp 项目中，自定义组件，引入并使用自定义组件时出现了该报错， 解决方案： 当我仔细检查，原来是自定义组件时，命名时将"=“等于号写成了”："冒号. 创建自定义组件 <template name="组件名称"> <view>这是一个自定义组件</view> </template> <script> export default { name: "组件名称", //属性
component: template or render function not defined
xiao_penghua的博客
07-15 646
## component: template or render function not defined 这个错误的问题 讲道理，我今天学习VUE router 的时候，配置我的index页面，发现了个很奇怪的问题，具体如下图： 很奇怪，作为一个初学VUE的小白，我以为是我的模块出错了， 仔细去查看我写的代码，我没找到,不可能有这么低级的代码敲错（大声），然后我去看我的路由，瞎改了改，发现。。。这问题，好像解决了？？代码如下： 然后，我还是没懂这个问题是什么原因，希望有大佬如果知道原因，解决方式能
vue报错弹窗怎么关闭
07-14
要关闭Vue报错弹窗，你可以按照以下几个步骤进行操作： 1. 确定报错弹窗是由Vue提供的错误提示框，而不是浏览器自身的错误提示框。Vue的错误提示框通常会显示在开发者工具的控制台中。 2. 打开浏览器的开发者工具，通常可以通过按下F12键或右键点击页面并选择“检查元素”来打开。 3. 在开发者工具的控制台中，查看报错信息并尝试解决报错。根据报错信息，你可以定位到代码中可能存在问题的位置，并进行修复。 4. 修复代码中的错误后，刷新页面，查看是否还会弹出报错弹窗。如果问题已解决，报错弹窗应该不再出现。 如果以上步骤无法解决问题，可以尝试以下方法： 1. 在Vue项目的入口文件（通常是main.js）中，添加以下代码来禁用Vue的错误提示框： ```javascript Vue.config.errorHandler = function(err, vm, info) { // 阻止错误弹窗显示 console.error(err); }; ``` 这样设置后，错误信息将只会打印到控制台，而不会弹出报错弹窗。 2. 如果你使用的是Vue的开发版本，可以尝试切换到生产版本。开发版本会有更多的错误提示信息，而生产版本会更加精简，不会弹出错误提示框。 希望以上方法能帮助你关闭Vue报错弹窗。如果问题仍然存在，建议提供更详细的错误信息和相关代码，以便更好地帮助你解决问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值