Vue warn]: Component is missing template or render function.

本文介绍了在Vue项目开发过程中遇到组件缺少模板或渲染函数的警告时,如何进行排查和解决。问题可能源于在导入模块时未指定.vue后缀导致webpack错误引入,或者新建Vue文件未编写模板。解决方案包括确保引入模块时使用正确的.vue扩展名,以及在Vue文件中添加基本的模板、脚本和样式。通过修复这些问题,可以避免控制台警告并使组件正常显示。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

警告:Component is missing template or render function.
问题声明:
组件缺少模板或渲染功能。

解决问题

方式一:

在写vue项目时,网页没有加载出来东西一片空白,然后控制台出现黄色的警告:

原因是:在引入模块的时候没有写后缀!!!
在这里插入图片描述
加上.vue后就可以正常显示了。

原因:

其实按道理,webpack的规则是允许 .vue .js 文件在引入的时候省略文件名后缀的。

import test from ‘./test.vue’
import test from ‘./test’ //等同于

import test from ‘./test.js’
import test from ‘./test’ //等同于

但是当目录下同事存在 test.js 和 test.vue 文件的时候,会优先引入 .js 文件(js>vue)。

方式二:

新创建的vue文件,没有写模板,里面没写任何东西
在这里插入图片描述
这个时候也会出来警告
写入模板即可

<template>
  <div></div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  setup() {
    return {}
  }
})
</script>

<style scoped></style>

这样问题就解决了

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值