nuxt SSR应用使用vue-infinite-scroll: error: document is not defined

原创于 2019-03-13 12:03:33 发布 · 2.2k 阅读

CC 4.0 BY-SA版权

文章标签：

1 篇文章

订阅专栏

本文解决Nuxt.js服务端渲染(SSR)中因使用无限滚动插件导致的问题。通过在plugins目录下添加vue-infinite-scroll.js，并在nuxt.config.js中配置，将插件设置为仅在客户端打包引用，实现无限滚动功能的正常运行。

代码链接, ant-design-vue官方实例没有使用SSR所以正常运行

错误信息

由于是服务端渲染，并不理解document, window这类浏览器对象。
因为是nuxt.js的出使用者，对配置都还不熟悉，所以会出现这种问题。

在前端项目目录的plugins里添加 vue-infinite-scroll.js

import Vue from 'vue';
import infiniteScroll from 'vue-infinite-scroll';

export default () => {
  Vue.use(infiniteScroll)
}

 plugins: [{
    src: '~plugins/vue-infinite-scroll',  // vue-infinite-scroll名字和js文件名字对应就行
    ssr: false // 只在client被打包引用
  }],

然后用的时候直接用就行，不用import