[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 Apple Watch 开发

    1. Watch OS 1 与 Watch OS 2 的区别 : OS 1 中界面运行在手表上,而代码(Extension)运行在手机端:OS 2 是纯正的手表原生(Native)应用 由于架构的改变 ...

  2. java—将查询的结果封装成List<Map>与用回调函数实现数据的动态封装（44）

    手工的开始QueryRunner类.实现数据封装: MapListHandler MapHandler BeanListHandler BeanHandler 第一步:基本的封装测试 写一个类,Que ...

  3. IIS发布好的网页突然不显示图片了

    按以下步骤把地址加到ie的本地intranet就好了

  4. 给洛谷填坑的spj……

    这里提供了洛谷某些题的$special\ judge$,供需要的oier拿过去对拍. 1.P3825 #include "testlib.h" using namespace st ...

  5. mxonline实战10，课程列表页，课程详情页1

    对应github地址:第10天   一. 课程列表页   1. 拷贝course-list.html到templates目录中 2. 编写url和view 在courses/views.py中新加

  6. iOS学习笔记（7）——解析json中的中文

    NSURL *url = [NSURL URLWithString:@"http://nycode.sinaapp.com/d.php"]; NSError *error = ni ...

  7. 2016级算法第六次上机-F.AlvinZH的学霸养成记VI

    1082 AlvinZH的学霸养成记VI 思路 难题,凸包. 分析问题,平面上给出两类点,问能否用一条直线将二者分离. 首先应该联想到这是一个凸包问题,分别计算两类点的凸包,如果存在符合题意的直线,那 ...

  8. node-redis模块需要注意的事项

    node之中连接redis使用的redis模块,虽然好用,但是有些地方还是需要注意. npm install redis redis client 行为:1.客户端执行过程中断网的情况 由于原本连接正 ...

  9. 前端知识总结--js原型链

    js的原型链听着比较深奥,看着容易晕,梳理一下还是比较容易懂的 (先简单写下,后续有时间再整理) 简而言之 原型链:就是js的对象与对象之间,通过原型组成建立的层层关系,构成了整个链条,称之为原型链  ...

  10. 利用ReentrantLock简单实现一个阻塞队列

    借助juc里的ReentrantLock实现一个阻塞队列结构: package demo.concurrent.lock.queue; import java.util.concurrent.lock ...