Vue 挂载失败「template or render function not defined」？3 步教你把组件定义齐，挂载瞬间成功！
正文目录
- 报错含义：Vue 找不到“画什么”
- 5 大高频翻车现场 & 修复代码
- 万能兜底：运行时 vs 编译时
- 预防 checklist（不再踩坑）
- 一句话总结
一、报错含义：Vue 找不到“画什么”
当你在控制台看到：
Failed to mount component: template or render function not defined.Vue 在告诉你：
「你给了我一堆组件配置，但没有<template>或render()，我不知道该怎么画界面。」
本质：组件没有有效的模板或渲染函数。
二、5 大高频翻车现场 & 修复代码
① 单文件组件忘写<template>
<!-- ❌ 没有 <template> --> <script setup> const msg = 'Hello' </script>修复：补上模板
<template> <div>{{ msg }}</div> </template> <script setup> const msg = 'Hello' </script>② 选项式 API 只写 script 没 template
// ❌ 只有 script，没有 templateexportdefault{data(){return{msg:'Hello'}}}修复：补上 template 或 render
exportdefault{data(){return{msg:'Hello'}},template:`<div>{{ msg }}</div>`// ✅}③ 运行时版用运行时模板
// ❌ 运行时版用了 template 字符串import{createApp}from'vue'createApp({template:'<div>Hi</div>'// 运行时版无法编译}).mount('#app')修复：用带编译器的 Vue 或预编译模板
// vite.config.js 别名指向完整版resolve:{alias:{vue:'vue/dist/vue.esm-bundler.js'}}④ 动态组件未导出自身（递归）
<!-- SelfComp.vue --> <script setup> // ❌ 没导出自身，递归时找不到 </script> <template> <SelfComp /> </template>修复：导出自身（Vue3<script setup>自动导出，选项式需写 name）
exportdefault{name:'SelfComp'}// ✅⑤ 动态导入路径错误
constComp=defineAsyncComponent(()=>import('./Comp'))// ❌ 文件不存在修复：确认路径 + 后缀
constComp=defineAsyncComponent(()=>import('./Comp.vue'))// ✅三、万能兜底：运行时 vs 编译时
| 场景 | 所需 Vue 版本 | 修复 |
|---|---|---|
浏览器直接<script src> | 完整版vue.global.js | 指向完整版 |
| Vite/VueCLI | 运行时+ 预编译 | 用.vue文件 |
| 运行时字符串模板 | 完整版 | 别名指向vue.esm-bundler.js |
四、预防 checklist
- 单文件组件必有
<template> - 选项式 API必有 template 或 render
- 运行时版不直接写 template 字符串（用
.vue） - 递归组件导出自身 name
- 动态导入路径 + 后缀正确
- 控制台「template not defined」= 立即检查模板或 render 函数
五、一句话总结
「template or render not defined」= 组件没告诉 Vue 怎么画界面。
补上<template>、给render()、对好路径，挂载立刻成功！
最后问候亲爱的朋友们，并邀请你们阅读我的全新著作
📚 《Vue.js 3企业级项目开发实战（微课视频版》
