单文件组件在<template>标签中可以定义多个根元素

在 Vue.js 中，单文件组件的模板部分通常只能包含一个根元素。这是因为单文件组件的模板会被编译成 JavaScript 代码，而 JavaScript 代码中只能有一个顶级元素。

如果在单文件组件的 `<template>` 标签中定义多个根元素，Vue.js 在编译时会报错。为了解决这个问题，Vue.js 2.x 版本引入了一个名为 `vue-template-loader` 的工具，可以通过配置来允许单文件组件的模板中包含多个根元素。

使用 `vue-template-loader` 可以通过 Webpack 来配置，需要添加 `vue-template-loader` 到 Webpack 的配置文件中，并设置 `esModule` 为 `true`。这样就可以在单文件组件的模板中使用多个根元素了。

下面是一个简单的例子，展示了如何在单文件组件的模板中定义多个根元素：

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'Hello, World!',
      content: 'This is a demo.'
    }
  }
}
</script>

在上述代码中，单文件组件的模板部分包含了两个根元素，一个是 `h1` 元素，一个是 `p` 元素。如果直接使用 Vue.js 编译这个模板，会报错提示模板只能包含一个根元素。但是如果使用 `vue-template-loader` 工具，就可以成功编译这个模板并运行应用。

需要注意的是，在实际开发中，尽量避免在单文件组件的模板中定义多个根元素，因为这样会增加代码的复杂度和维护成本。如果确实需要使用多个根元素，可以使用 `vue-template-loader` 工具来解决这个问题。