Nuxt vue warn : 服务器内容和客户端虚拟DOM不匹配

Question

相关配置

nuxt.config.js

    build: {
        vendor: ['axios', 'element-ui', 'vue-lazyload', '~/plugins/vue-infinite-loading.js']
    },
    plugins: [
        { src: '~/plugins/element-ui', ssr: true },
        { src: '~/plugins/vue-lazyload', ssr: true },
        { src: '~/plugins/vue-infinite-loading.js', ssr: false}
    ]

vue-infinite-loading.js是一款只能在浏览器环境执行的js脚本，主要是下拉加载

~/plugins/vue-infinite-loading.js

import Vue from 'vue'
import InfiniteLoading from 'vue-infinite-loading'

if (typeof document !== 'undefined') {
    console.log('broswer环境')
    Vue.component('infinite-loading', InfiniteLoading)
} else {
    console.log('NodeJs环境')
}

结果

运行开发环境，一切ok。不过，有警告:

vue.runtime.esm.js:574[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

打包生产,就出问题了，直接挂掉.

参考过的资料

Vue2服务端渲染实践以及相关解读
nuxt项目踩坑
美团点评点餐 Nuxt.js 实战

无果，求助。

2018年3月28日14:51:40 补充

@ MightyVincent

这个警告应该是合理的吧？毕竟：你开启了服务端渲染，然后服务端渲染的页面到客户端后又被你的vue-infinite-loading.js下拉加载修改了，然后自然就警告你说你的服务端渲染的内容和你客户端看到的不一样了咯

方才，测试了下MightyVincent所说的问题，果真如此. 那么，nuxt又是怎么做到只是首页SSR，其他页面不用SSR呢？ 持续跟进中。。。。 各位， 求助 , 提供思路也行

Answer 1

问题，解决， ssr会进行初始化时前后dom比较，保证初始化前后一致就ok

Answer 2

大神，可以问你一个关于nuxt使用vue-lazyload的问题吗。就是我在nuxt项目使用了vue-lazyload，但是一直包虚拟DOM树与服务器呈现的内容不匹配。请问该如何解决呢

Answer 3

script方式导入element，组件很容易导致生命周期调用两次。
plugs方式导入
plugins: [

{
  src: '~/plugins/element.js',
  ssr: true
}

],倒不会应为行内元素和块级元素同级导致生命周期执行两次。