相關(guān)配置

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是一款只能在瀏覽器環(huán)境執(zhí)行的js腳本，主要是下拉加載

~/plugins/vue-infinite-loading.js

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

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

結(jié)果

運行開發(fā)環(huán)境，一切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

打包生產(chǎn),就出問題了，直接掛掉.

參考過的資料

Vue2服務(wù)端渲染實踐以及相關(guān)解讀
nuxt項目踩坑
美團點評點餐 Nuxt.js 實戰(zhàn)

無果，求助。

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

@ MightyVincent

這個警告應(yīng)該是合理的吧？畢竟：你開啟了服務(wù)端渲染，然后服務(wù)端渲染的頁面到客戶端后又被你的vue-infinite-loading.js下拉加載修改了，然后自然就警告你說你的服務(wù)端渲染的內(nèi)容和你客戶端看到的不一樣了咯

方才，測試了下MightyVincent所說的問題，果真如此. 那么，nuxt又是怎么做到只是首頁SSR，其他頁面不用SSR呢？ 持續(xù)跟進中。。。。 各位， 求助 , 提供思路也行