如何修复ESLint的vue/no-multiple-template-root错误？

这个错误是因为当前ESLint规则要求Vue模板的根节点必须唯一，根据你使用的Vue版本，有两种修复方式：

Vue 2 项目 #

Vue 2本身不支持多根节点模板，必须用单个容器元素包裹所有内容：

• 可以用普通HTML容器（如<div>、<section>）
• 也可以用Vue提供的无渲染占位符<template>（Vue 2.6及以上版本支持）

示例：

<!-- 错误写法 -->
<template>
  <h1>页面标题</h1>
  <p>页面内容</p>
</template>

<!-- 正确写法：用div包裹 -->
<template>
  <div>
    <h1>页面标题</h1>
    <p>页面内容</p>
  </div>
</template>

<!-- 正确写法：用无渲染template占位符 -->
<template>
  <template>
    <h1>页面标题</h1>
    <p>页面内容</p>
  </template>
</template>

Vue 3 项目 #

Vue 3原生支持多根节点，但ESLint的vue/no-multiple-template-root规则默认针对Vue 2，可通过修改ESLint配置解决：

1. 直接关闭该规则
   修改项目根目录下的.eslintrc.js（或.eslintrc.json等对应配置文件）：

module.exports = {
  // 其他配置项...
  rules: {
    'vue/no-multiple-template-root': 'off'
  }
}

2. 配置规则适配Vue 3
   如果使用的是最新版eslint-plugin-vue，可以指定规则适配Vue 3版本：

module.exports = {
  // 其他配置项...
  rules: {
    'vue/no-multiple-template-root': ['error', { version: 3 }]
  }
}

当然，如果你习惯保持单根结构，也可以沿用Vue 2的容器包裹方式。

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