在 Nuxt中使用滚动组件 vue-seamless-scroll

在基于Nuxt的项目中使用滚动组件vue-seamless-scroll,刷新后会报window is not defined错误。文章介绍了该组件的安装方法,分析报错原因是Nuxt为服务器渲染框架,还提及客户端虚拟DOM树与服务器内容不匹配问题,最后说明了配置文件修改及组件使用。

在公司基于Nuxt项目中需要使用滚动组件,刷新之后会报错window is not defined

1. 安装 vue-seamless-scroll

npm install vue-seamless-scroll --save

2. 更改配置文件

报错 window is not defined,是由于nuxt是基于服务器渲染的框架,服务器渲染时没有wiindow定义的。
VUE报错:客户端呈现的虚拟DOM树与服务器呈现的内容不匹配。这可能是由不正确的HTML标记引起的,例如在其中嵌套块级元素或丢失。

在 plugins 目录中新建 vue-seamless-scroll.js 文件:

import Vue from 'vue'
import SeamlessScroll from 'vue-seamless-scroll'

Vue.use(SeamlessScroll)

在nuxt.config.js修改配置项

  p
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值