javascript - [Vue 警告]：客户端渲染的虚拟 DOM 树与服务器渲染的内容不匹配。如何找到位置？

Question

我的 nuxt.js 项目显示了这个问题：

[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

warn    @   vue.runtime.esm.js?2b0e:619
patch   @   vue.runtime.esm.js?2b0e:6497
Vue._update @   vue.runtime.esm.js?2b0e:3945
updateComponent @   vue.runtime.esm.js?2b0e:4060
get @   vue.runtime.esm.js?2b0e:4479
Watcher @   vue.runtime.esm.js?2b0e:4468
mountComponent  @   vue.runtime.esm.js?2b0e:4073
Vue.$mount  @   vue.runtime.esm.js?2b0e:8415
init    @   vue.runtime.esm.js?2b0e:3118
hydrate @   vue.runtime.esm.js?2b0e:6378
patch   @   vue.runtime.esm.js?2b0e:6493
Vue._update @   vue.runtime.esm.js?2b0e:3945
updateComponent @   vue.runtime.esm.js?2b0e:4060
get @   vue.runtime.esm.js?2b0e:4479
Watcher @   vue.runtime.esm.js?2b0e:4468
mountComponent  @   vue.runtime.esm.js?2b0e:4073
Vue.$mount  @   vue.runtime.esm.js?2b0e:8415
init    @   vue.runtime.esm.js?2b0e:3118
hydrate @   vue.runtime.esm.js?2b0e:6378
hydrate @   vue.runtime.esm.js?2b0e:6411
patch   @   vue.runtime.esm.js?2b0e:6493
Vue._update @   vue.runtime.esm.js?2b0e:3945
updateComponent @   vue.runtime.esm.js?2b0e:4060
get @   vue.runtime.esm.js?2b0e:4479
Watcher @   vue.runtime.esm.js?2b0e:4468
mountComponent  @   vue.runtime.esm.js?2b0e:4073
Vue.$mount  @   vue.runtime.esm.js?2b0e:8415
init    @   vue.runtime.esm.js?2b0e:3118
hydrate @   vue.runtime.esm.js?2b0e:6378
hydrate @   vue.runtime.esm.js?2b0e:6411
patch   @   vue.runtime.esm.js?2b0e:6493
Vue._update @   vue.runtime.esm.js?2b0e:3945
updateComponent @   vue.runtime.esm.js?2b0e:4060
get @   vue.runtime.esm.js?2b0e:4479
Watcher @   vue.runtime.esm.js?2b0e:4468
mountComponent  @   vue.runtime.esm.js?2b0e:4073
Vue.$mount  @   vue.runtime.esm.js?2b0e:8415
init    @   vue.runtime.esm.js?2b0e:3118
hydrate @   vue.runtime.esm.js?2b0e:6378
hydrate @   vue.runtime.esm.js?2b0e:6411
patch   @   vue.runtime.esm.js?2b0e:6493
Vue._update @   vue.runtime.esm.js?2b0e:3945
updateComponent @   vue.runtime.esm.js?2b0e:4060
get @   vue.runtime.esm.js?2b0e:4479
Watcher @   vue.runtime.esm.js?2b0e:4468
mountComponent  @   vue.runtime.esm.js?2b0e:4073
Vue.$mount  @   vue.runtime.esm.js?2b0e:8415
init    @   vue.runtime.esm.js?2b0e:3118
hydrate @   vue.runtime.esm.js?2b0e:6378
hydrate @   vue.runtime.esm.js?2b0e:6411
patch   @   vue.runtime.esm.js?2b0e:6493
Vue._update @   vue.runtime.esm.js?2b0e:3945
updateComponent @   vue.runtime.esm.js?2b0e:4060
get @   vue.runtime.esm.js?2b0e:4479
Watcher @   vue.runtime.esm.js?2b0e:4468
mountComponent  @   vue.runtime.esm.js?2b0e:4073
Vue.$mount  @   vue.runtime.esm.js?2b0e:8415
init    @   vue.runtime.esm.js?2b0e:3118
hydrate @   vue.runtime.esm.js?2b0e:6378
hydrate @   vue.runtime.esm.js?2b0e:6411
patch   @   vue.runtime.esm.js?2b0e:6493
Vue._update @   vue.runtime.esm.js?2b0e:3945
updateComponent @   vue.runtime.esm.js?2b0e:4060
get @   vue.runtime.esm.js?2b0e:4479
Watcher @   vue.runtime.esm.js?2b0e:4468
mountComponent  @   vue.runtime.esm.js?2b0e:4073
Vue.$mount  @   vue.runtime.esm.js?2b0e:8415
mount   @   client.js?06a0:709
_callee5$   @   client.js?06a0:747
tryCatch    @   runtime.js?96cf:45
invoke  @   runtime.js?96cf:274
prototype.<computed>    @   runtime.js?96cf:97
asyncGeneratorStep  @   asyncToGenerator.js?1da1:3
_next   @   asyncToGenerator.js?1da1:25
Promise.then (async)        
asyncGeneratorStep  @   asyncToGenerator.js?1da1:13
_next   @   asyncToGenerator.js?1da1:25
Promise.then (async)        
asyncGeneratorStep  @   asyncToGenerator.js?1da1:13
_next   @   asyncToGenerator.js?1da1:25
eval    @   asyncToGenerator.js?1da1:32
eval    @   asyncToGenerator.js?1da1:21
_mountApp   @   client.js?06a0:693
mountApp    @   client.js?06a0:693
Promise.then (async)        
eval    @   client.js?06a0:96
eval    @   client.js:1169
./.nuxt/client.js   @   app.js:35
__webpack_require__ @   runtime.js:854
fn  @   runtime.js:151
0   @   app.js:861
__webpack_require__ @   runtime.js:854
checkDeferredModules    @   runtime.js:46
webpackJsonpCallback    @   runtime.js:33
(anonymous) @   app.js:1

我知道这个问题的含义，但我怎样才能找到这个地方？似乎没有给出错误的代码位置信息。

---

EDIT-01

在我的layout/default.vue中，在我添加 之后<Header/>，它导致了问题。

<template>
  <div>
    <Header></Header>
    <nuxt/>

  </div>
</template>

我的 Header 是这样的结构：

<template>
  <div class="main-body" >...</div>
</template>

标签： javascriptnuxt.js