在 Nuxt中 使用 vue-seamless-scroll 遇到的问题

之前在其他项目中用过一个无缝滚动的组件 vue-seamless-scroll 感觉还可以，然后打算在 Nuxt 项目中继续使用，但是该组件的作者表示暂不支持 Nuxt ，但实际上我们可以通过添加 <client-only> 标签来解决这个问题，组件的演示地址。

一、安装 vue-seamless-scroll

二、修改配置

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

修改 nuxt.config.js 配置：

ssr: false 为 true 的话，会报 Windows is not defined 错误。

重启服务后，发现控制台报错：

[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.

翻译过来就是：

[Vue警告]：客户端呈现的虚拟DOM树与服务器呈现的内容不匹配。这可能是由不正确的HTML标记引起的，例如在其中嵌套块级元素或丢失。Bailing水化和执行完整的客户端渲染。

三、解决方案

在 vue-seamless-scroll 外层添加 client-only 标签，告诉服务器仅在客户端渲染。

时间是一个好东西，记录的是学习的证据