vue3报错：The template root requires exactly one element终极解决办法

兴冲冲的开启一个vue3项目，控制台却报错The template root requires exactly one element

我们知道，在vue2中，template中只能有一个根元素，但在vue3中，则去掉了这个限制
那么如何解决这个错误提示呢？

方法一

可能是项目中引入的eslint报的错
解决方法：在项目的.eslintrc.js配置文件的rules中添加："vue/no-multiple-template-root": "off"

  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    "vue/no-multiple-template-root":'off' 
  }

此时，控制台的报错就没有了

方法二

如果用了方法一，控制台还是报错。。。
那可能是vscode某个插件，带有检查语法的功能——就是vetur!

• 修改插件vetur的配置
  
• 取消这个勾选
  
• 重启vscode

报错没有了，解决！

附言：如果你是用vue3，建议用Volar来替换vetur！！！

volar 和 vetur都是针对 vue 的插件，但是 volar 的功能却要强大得多，也能更好的支持TS

end