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

时间:2020-06-16 07:51:17

标签: javascript nuxt.js

我的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>

我的标题就是这样的结构:

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

0 个答案:

没有答案