Vue2使用的过程中报错误Failed to mount component: template or render function not defined

大概遇到有以下几种情况，简单记录一下。。。

1、页面引用组件时

先看一下当前的目录结构

当前页面的目录结构是vipTag/index.vue主页面；component下的tagRoule.js、tagRoule.scss和tagRoule.vue等组成的组件，因为当前组件逻辑，样式部分比较长，所以做了一下拆分；这个时候我们回到vipTag/index.vue主页面 看一下import

import tagRule from "./components/tagRule"；这种情况就导致了无法识别具体引入的文件导致了报错误，改为import tagRule from "./components/tagRule.vue";即可

2、router/index.js路由引用页面时

错误示例

上图所示，component: require('@/views/vipTag/index.vue') 当前的写法导致了报错

原因是：require 是 CommonJS 的模块导入方式，而组件定义时写的 export default 是 ES6 方式，因此require 导入的结果其实是一个含 default 属性的对象，所以 vue 中 component 用这个会报错，而恰好 vue 的命名视图组件注册用 components ，而合理的用法应该是require('xxx.vue').default 或是用 import