[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. 如何成功导入SlidingMenu库？

    SlidingMenu是一个开源的侧滑菜单(https://github.com/jfeinstein10/SlidingMenu).  为大家的安卓程序提供侧滑菜单,这个功能也非常有用. 要想正常使 ...

  2. video视频内容填充整个播放空间方法

    关于video视频内容填充整个播放空间方法一般上传的视频都没法占满video,看起来很不美观,解决办法很简单video{ object-fit:fill;}

  3. LCS - Longest Common Substring(spoj1811) (sam(后缀自动机)+LCS)

    A string is finite sequence of characters over a non-empty finite set \(\sum\). In this problem, \(\ ...

  4. robot framework学习笔记之十一--第三方库requests详解

    一.安装 Requests 通过pip安装 pip install requests 或者,下载代码后安装: $ git clone git://github.com/kennethreitz/req ...

  5. WebLogic “Java 反序列化”过程远程命令执行

    WebLogic “Java 反序列化”过程远程命令执行 详细信息: https://www.seebug.org/vuldb/ssvid-89726 说明: 反序列化是指特定语言中将传递的对象序列化 ...

  6. java学习笔记_接口

    接口:interface(关键字) public interface USB {} 1. 接口中都是抽象方法,方法前面的可见度(public.private)和抽象关键字(abstract)可以不写. ...

  7. 用 diff 比较两个 hdfs 文件内容

    diff <(hadoop fs -cat /path/to/file) <(hadoop fs -cat /path/to/file2)

  8. 在windows上添加cygwin右键

    来了一台新机器,装环境的时候,突然想直接在右键使用cygwin. 查了一些教程,基本大同小异,也算是有用,先贴一个链接: https://blog.csdn.net/yang_hong_/articl ...

  9. 关于MatlabGUI清除WorkSpace的用法

    近日在调试Matlba GUI程序时,因为不想退出程序后手动Clear All来清理,又需要在过程中对WorkSpace进行清理,否则会引用之前的结果导致错误,找了很多资料,国内的论坛什么的都说用Cl ...

  10. Mac下一台电脑管理多个SSH KEY（转）

    一.关于ssh是什么? http://www.ruanyifeng.com/blog/2011/12/ssh_remote_login.html 二.需求: 一台电脑上(Mac os)管理多个ssh ...