[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. python网络编程--线程(锁,GIL锁,守护线程)

    1.线程 1.进程与线程 进程有很多优点,它提供了多道编程,让我们感觉我们每个人都拥有自己的CPU和其他资源,可以提高计算机的利用率.很多人就不理解了,既然进程这么优秀,为什么还要线程呢?其实,仔细观 ...

  2. python文件备份与简单操作

    #!/usr/bin/python # -*- coding: utf-8 -*- # data:2018/8/30 # user:fei import sys import random num = ...

  3. C# Winform 小技巧(Datagridview某一列按状态显示不同图片)

    步骤: 一.导入状态图片到项目中: 二.在窗体中声明一个图片数组,并在窗体的OnLoad事件中加入图片资源: /// <summary> /// 存储状态图片序列,避免同一状态对图片重复读 ...

  4. Linux下查找命令

    在CentOs下查找某个目录下的某个文件,使用如下指令: find /目录 -name 文件名 eg:查找当前目录下关于hadoop的文件 find / -name hadoop

  5. openpyxl读写Excel文件

    安装 pip install openpyxl 一个简单的实例: 最初的表格 #!/usr/bin/env python # -*- coding:utf-8 -*- import openpyxl ...

  6. ava Maven项目之Nexus私服搭建和版本管理应用

    目录: Nexus介绍 环境.软件准备 Nexus服务搭建 Java Maven项目版本管理应用 FAQ 1.Nexus介绍 Nexus是一个强大的Maven仓库管理器,它极大地简化了自己内部仓库的维 ...

  7. Centos搭建Groovy开发环境

    背景 临时接到需求,要帮兄弟团队跑一点线上的数据,据说很急.于是拿出了许久不用的Spring-Boot.可是,可是,死活启动有问题,心累了.其实一般写脚本就是在Boot用Groovy写好,然后放到线上 ...

  8. elasticsearch5.2.1使用logstash同步mysql

    centos 本人亲测可以  首先安装好mysql,elasticsearch   不懂的请参考另一篇文章 安装logstash官方:https://www.elastic.co/guide/en/l ...

  9. 如何无人值守安装linux系统（上）

    如何开始 Linux 的无人值守安装 一.预备知识: I.什么是PXE PXE并不是一种安装方式,而是一种引导方式.进行PXE安装的必要条件是要安装的计算机中包含一个PXE支持的网卡(NIC),即网卡 ...

  10. Python的垃圾回收机制以及引用计数

    Python中的计数引用 在Python中,由于Python一门动态的语言,内部采用的指针形式对数据进行标记的,并不像c/c++那样,通过指定的数据类型并分配相应的数据空间,Python中定义的变量名 ...