Failed to mount component: template or render function not defined.
- 问题描述
在引入所需组件时，出现以下错误。
自己猜测大概率是引入名称或者是引入方式出错了。然后就开始试验，果然，问题出在组件的引入方式上了，错误代码如下：
<script>
export default {
data() {
return{
list: ['Prompt'],
text: ''
}
},
components: {
Prompt: require('@/components/news/Prompt')
}
}
</script>
这个地方错在不能使用require()直接引入组件。
PS：平常都是import所需组件然后直接注册的，脑子一抽就想直接试试require()引入，结果就出错了。哈哈哈
- 解决方法
目前自己已经找到了四种解决方法，有错误或者补充，欢迎大家指出。废话不多说，看代码。
1、直接使用import xxx from 'xxx'的方法引入组件，然后注册，如下：
<script>
import Prompt from '@/components/news/Prompt';
export default {
data() {
return{
list: ['Prompt'],
text: ''
}
},
components: {
Prompt
}
}
</script>
2、在组件注册的地方使用箭头函数（如果使用普通匿名函数引入记得加return）调用import语句引入组件，如下：
<script>
export default {
data() {
return{
list: ['Prompt'],
text: ''
}
},
components: {
Prompt: () => import('@/components/news/Prompt')
}
}
</script>
接下来的两种方法参考了以下文章。
“[Vue warn]: Failed to mount component: template or render function not defined”
3、在组件注册的地方使用(resolve) => require([’xxx’], resolve)的方法引入组件，如下：
<script>
export default {
data() {
return{
list: ['Prompt'],
text: ''
}
},
components: {
Prompt: resolve => require(['@/components/news/Prompt.vue'], resolve)
}
}
</script>
4、在组件注册的地方使用require([xxx’).default的方法引入组件，如下：
<script>
export default {
data() {
return{
list: ['Prompt'],
text: ''
}
},
components: {
Prompt: require('@/components/news/Prompt.vue').default
}
}
</script>
- 总结
不仅是组件注册，在路由等一些需要引入单页面的地方也有可能出现这个错误。总得来说还是自己对有一些方法了解不够清晰。
