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