Vue单文件组件填充template标签内容时出现错误该如何解决？

1. 路由组件引入方式错误
   你在routes.js中使用require('./views/Home.vue')直接给component赋值，vue-loader处理后的单文件组件默认以ES模块规范导出，CommonJS语法的require获取到的是包含default属性的模块对象，而非合法的Vue组件配置。template为空时没有触发渲染校验逻辑所以不会报错，一旦template内有实际内容，渲染逻辑无法识别非法的组件配置就会抛出错误。
2. template内容不符合Vue 2语法规范
   Vue 2不支持组件模板有多个根节点，如果你往template中添加内容时没有用唯一的根标签包裹所有内容，也会触发渲染报错。

• 修正路由引入语法（优先推荐）
  改用ES模块的import写法引入组件，两种可选写法：
  1. 路由懒加载写法（性能更优）：

  // routes.js中对应路由修改为
  {
    path: '/',
    component: () => import('./views/Home.vue')
  }
  

  2. 顶部提前引入写法：

  // routes.js顶部添加引入
  import Home from './views/Home.vue'
  // 对应路由修改为
  {
    path: '/',
    component: Home
  }
  

• 若要保留require写法，补充.default属性获取实际组件配置：

  {
    path: '/',
    component: require('./views/Home.vue').default
  }
  

• 确保template内容符合Vue 2语法要求，所有内容包裹在唯一的根元素内：

  <template>
    <div>
      <!-- 所有内容放在这个div根标签内 -->
      <p>测试内容</p>
    </div>
  </template>
  

内容的提问来源于stack exchange，提问作者user13138572