Vue2项目App.vue报The template root requires exactly one element错误怎么解决

错误原因 #

Vue 2 强制要求template下只能存在唯一的根元素，你当前的template内包含<div id="nav">和<router-view/>两个同级根元素，因此触发vue/valid-template-root规则报错。
你之前新增包裹元素仍未生效，大概率是包裹逻辑有误、或者修改后未重启开发服务导致缓存未更新。

修复方案 #

直接在template最外层加一个div作为唯一根元素，为了匹配你原有样式里的#app配置，直接给这个根元素设置id为app即可，修改后的完整代码如下：

<template>
  <div id="app">
    <div id="nav">
       <router-link :class="{active: $route.name === 'Home'}"  to="/">Home</router-link>
       <router-link :class="{active: $route.name === 'Cart'}" to="/cart">Cart</router-link>
    </div>
    <router-view/>
  </div>
</template>

<script>
export default {
  mounted() {
    this.$store.commit('updateCartFromLocalStorage')
  }
}
</script>
    
<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
    
html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}
body {
  background-color: rgb(245, 245, 245);
}
    
#nav {
  padding: 10px;
  width: 100%;
  height: 30px;
  background-color: white;
  line-height: 30px;
}
a {
  font-weight: bold;
  color: darkgray;
  text-decoration: none;
  margin: 0 5px 0 5px;
  font-size: 1.25rem;
   
  &.active {
    color: #2c3e50;
  }
}
    
.text-center {
  text-align: center;
}
</style>

仍报错的排查方案 #

如果修改后还是提示相同错误，按以下步骤排查：

• 确认所有template内的元素都被包裹在最外层的根div中，没有遗漏的同级元素
• 保存修改后关闭本地开发服务，重新执行npm run serve启动项目，清除缓存影响
• 检查项目ESLint配置，确认没有自定义的校验规则冲突

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