• 报错信息
• 错误翻译
• 查看代码
• 错误分析
• 解决
• 编译运行

最近在信创前端项目组中

发现了这样一个bug

报错信息

Component template should contain exactly one root element

错误翻译

对于这个bug，我们很容易翻译为：

组件模板应该只包含一个根元素

查看代码

我们找到对应bug的代码：

错误分析

根据Vue的单root模式可知，template下面包含了两个div根节点，这是报错的根本原因。

解决

在两个div之外包裹一个原生div即可，如图所示：

编译运行

运行成功！