[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.

这个问题大致的意思就是，HTML结构嵌套不正确，我项目中出现的情况是：使用了element-ui中的<el-container>里面嵌套了一个<el-header>导致渲染出来的结果是一个<section>里面嵌套了一个<header>标签，导致了这样的情况。

最近发现这个问题的描述其实十分的清晰：服务端与客户端渲染的DOM结构不一样。上图中出现的这个问题是element-ui没有允许在服务端使用导致的。

将ssr的配置改为true，让element-ui能在服务端调用，直接渲染DOM结构，那么控制台就清净了。

nuxt.js踩坑之 - SSR 与 CSR 显示不一致问题的更多相关文章

  1. Nuxt.js 踩坑记录,(1)引入fs包报错

    今天又是码农的一天. 但是写着写着,不知道为啥就页面就报错了, 如图所示,我在db/app.js下引入了fs这个模块,提示我npm install,我也照做了,但是仍然报错. 通过各种百度,踩坑,最终 ...

  2. Nuxt.js 踩坑笔记 - 缓存向

    零.前言 最近参与了一个立足 seo 的移动端项目,公司前端工程主栈 vue,所以理所当然的用上了 nuxt,UI 主要选择了 Vant.   一.公共列表页的缓存 公共列表页由于数据量较大,故需要滚 ...

  3. Nuxt.js 踩坑记录(2) 使用sequelize时，提示install mysql2,安装了仍然不能解决问题

    打算写一个nuxt.js+sequelize+mysql的个人博客,遇到了挺多坑,还是坚持了下来,终于解决了这个bug. 今天不知道我做了什么,页面就报错了,定位到了使用sequelize的JS文件里 ...

  4. Nuxt.js 踩坑记录(3) Net.connection xxxx

    浏览器报的是Net.connection啥的错误 项目运行时报错这个 [HPM] Error occurred while trying to proxy request article from l ...

  5. react基础学习和react服务端渲染框架next.js踩坑

    说明 React作为Facebook 内部开发 Instagram 的项目中,是一个用来构建用户界面的优秀 JS 库,于 2013 年 5 月开源.作为前端的三大框架之一,React的应用可以说是非常 ...

  6. vue.js 踩坑第一步 利用vue-cli vue-router搭建一个带有底部导航栏移动前端项目

    vue.js学习 踩坑第一步 1.首先安装vue-cli脚手架 不多赘述,主要参考WiseWrong 的 Vue 爬坑之路(一)-- 使用 vue-cli 搭建项目 2.项目呈现效果 项目呈现网址:w ...

  7. nuxt项目踩坑

    1.window or document is not undefined // .vue 页面 if (process.browser) { var Distpicker = require('v- ...

  8. layui的引用js踩坑

    前言: 今天因为项目需要,需要使用layui,因为本身不多的前端经验,以为layui的用法和其他的前端框架,例如jquery,bootstrap等等,只需要直接引入layui.js,和layui.cs ...

  9. vuejs服务端渲染更好的SEO,SSR完全指南Nuxt.js静态站生成器

    vuejs服务端渲染更好的SEO,SSR完全指南Nuxt.js静态站生成器SSR 完全指南https://cn.vuejs.org/v2/guide/ssr.html在 2.3 发布后我们发布了一份完 ...

随机推荐

  1. iOS 优秀开源项目

    1. 界面 iCarousel: 用来做图片旋转显示效果(相册). MZTimerLabel:用来制作一个计时并显示时间的 label. MSDynamicsDrawerViewController, ...

  2. Elasticsearch学习(5) Elasticsearch+logstash +filebeat+log4j的日志系统

    最近需要使用Elasticsearch做一个日志系统,本文只介绍log4j内容同步到Elasticsearch,至于日志的查询和分类,会在后面介绍. 一.配置并打开Elasticsearch 这个操作 ...

  3. 【Oracle 12c】最新CUUG OCP-071考试题库（59题）

    59.(16-8)choose two: Which two statements are true regarding the USING and ON clauses in table joins ...

  4. django入门-模型-part2

    尊重作者的劳动,转载请注明作者及原文地址 http://www.cnblogs.com/txwsqk/p/6511177.html 完全翻译自官方文档 https://docs.djangoproje ...

  5. Keil RTX使用 os_mut_init 报Hard Fault 错误解决记录

    首先确定你的软件是在互斥信号初始化的位置,在以下几个位置,将会报Hard Fault 错误: (1).os_sys_init_user 用户线程创建之前 (2).os_tsk_create_user之 ...

  6. python基础知识梳理----2格式化输出,替换符

    一:格式化输出 1: 格式: 例子: name=input('请输入name') print('名字是%s'%name) %s就是代表字符串串占位符,除此之外,还有%d, 是数字占位符, 如果把上⾯面 ...

  7. 哈弗曼树的理解和实现(Java)

    哈弗曼树概述 哈弗曼树又称最优树,是一种带权路径长度最短的树,在实际中有广泛的用途.哈弗曼树的定义,涉及路径.路径长度.权等概念.哈弗曼树可以用于哈弗曼编码,用于压缩,用于密码学等. 哈弗曼树的一些定 ...

  8. js根据经纬度计算两点距离

    js版-胡老师 google.maps.LatLng.prototype.distanceFrom = function(latlng) {    var lat = [this.lat(), lat ...

  9. Java NIO学习与记录（二）：FileChannel与Buffer用法与说明

    FileChannel与Buffer用法与说明 上一篇简单介绍了NIO,这一篇将介绍FileChannel结合Buffer的用法,主要介绍Buffer FileChannel的简单使用&Buf ...

  10. ZJOI2019 day2 游记

    应该是打的最没有信仰的一次比赛了 然后这个垃圾水平居然还拿了170,真是有毒 我的语文并不好所以还是写流水账吧 day-2 到了余姚,发现附近并没有什么好吃的,于是直接去kfc了 另外潮湿的空气对呼吸 ...