[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. Oracle数据库02

    EXISTS子查询 特征:将主查询中的数据带到子查询中进行验证,如果验证成功则子查询返回true,当主查询接收到true的时候被验证的数据就显示,如果在子查询中验证失败则返回false,当主查询接收到 ...

  2. python--中的文件操作

    1.文件操作 把文件打开 open 打开 f = open ('文件路径',mode='模式',encoding='编码格式') #打开一个文件操作的时候取到的是一个句柄 读取的方法 . read() ...

  3. forword和重定向有什么区别？

    一.forword 1.请求只能从同一个web中转发,当前应用之外的找不到. 2.地址栏不变. 3.共享request对象,请求链不断. 4.永久性跳转,最常用. 5.客户端方法功能跳转 二.重定向 ...

  4. 记一次优化ansible inventory的小例子

    起因: 阿里云新扩容一批机器,要对上面的flume配置做修改 之前的inventory是这样子的 [user@vip10-ali-tj-console host_vars]$ sdiff vip10- ...

  5. [javascript]—jQuery解析本地 XML 文档

    Create a jQuery object using an XML string and obtain the value of the title node. <!doctype html ...

  6. nginx实现动静分离--附nginx配置文件详解

    转自http://www.cnblogs.com/1214804270hacker/p/9299462.html 一.认识访问静态资源与访问动态资源的区别 静态资源:指存储在硬盘内的数据,固定的数据, ...

  7. DataList用法总结

    设计模版: 页眉<HeaderTemplate>   </HeaderTemplate> 页脚<FooterTemplate> </FooterTemplat ...

  8. TX2 安装v4l

    在TX2上使用v4l2-ctl --all -d /dev/video0查看相机参数时报错: v4l2-ctl :command not found 手动安装: sudo apt-get instal ...

  9. OpenFoam+CFDEM+Liggghts安装耦合

    这里安装的时间节点为:2018.10.29,安装的是目前的最新版本CFDEM,支持到与OpenFoam-5.x的耦合. 1. 先安装openfoam:https://openfoam.org/down ...

  10. 【App测试】：Monkey测试App稳定性

    一,前提搭建android studio的环境中: 二,CMD进入到AndroidSDK\platform-tools路径下:输入adb shell 这个提示就是表示手机未连接 三.连接安卓手机,手机 ...