关于Vue引入组件后报错：Failed to mount component: template or render function not defined.

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>

• 总结
  不仅是组件注册，在路由等一些需要引入单页面的地方也有可能出现这个错误。总得来说还是自己对有一些方法了解不够清晰。