Vue 挂载失败：Failed to mount component: template or render function not defined

Vue 挂载失败「template or render function not defined」？3 步教你把组件定义齐，挂载瞬间成功！

正文目录

1. 报错含义：Vue 找不到“画什么”
2. 5 大高频翻车现场 & 修复代码
3. 万能兜底：运行时 vs 编译时
4. 预防 checklist（不再踩坑）
5. 一句话总结

---

一、报错含义：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企业级项目开发实战（微课视频版》