VUE之命令行報錯：Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead 解決辦法

Failed to compile.

./node_modules/vue-loader/lib/template-compiler?{"id":"data-v-59926570","hasScoped":true,"transformToRequire":{"video":["src","poster"],"source":"src","img":"src","image":"xlink:href"},"buble":{"transforms":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/page/home/Home.vue (Emitted value instead of an instance of Error)

Error compiling template:

<div><el-header class="animated faedOutUp"><myHeader></myHeader></el-header></div> <div>這里才是首頁</div>

- Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

@ ./src/page/home/Home.vue 11:0-366

@ ./src/router/index.js

@ ./src/main.js

@ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

 

寫vue時經常被一大片報錯驚了個呆

其實很多時候，都是些小毛病

比如這次，從文字翻譯上來講，其實Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead這句話已經講的很明白了，直譯出來 就是：組件模板應該包含一個根元素。如果在多個元素上使用V-IF，則使用V-ELS-IF來鏈接它們。

但是這么說依然讓新手有點摸不着頭腦，其實就是說在模版里只能有一個主div（根對象），如果有多個元素，請用一個主div包含他們

錯誤代碼如下：

<template>
  <div><el-header class="animated faedOutUp"><myHeader></myHeader></el-header></div>
  <div>這里才是首頁</div>
</template>

修改后如下

<template>
  <div>
    <el-header class="animated faedOutUp"><myHeader></myHeader></el-header>
    <div>這里才是首頁</div>
  </div>
</template>

保存運行，錯誤解決了！