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

Admin
Admin
Admin
49
文章
6
评论
2020年5月15日09:51:12 评论 493 1244字阅读4分8秒

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

一、安装 vue-seamless-scroll

  1. npm install vue-seamless-scroll --save

二、修改配置

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

  1. import Vue from 'vue';
  2. import SeamlessScroll from 'vue-seamless-scroll';
  3. Vue.use(SeamlessScroll);

修改 nuxt.config.js 配置:

  1. plugins: [
  2.     { src: '@/plugins/element-ui', ssr: true },
  3.     { src: '@/plugins/seamless-scroll', ssr: false } // ssr: false
  4. ]

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 标签,告诉服务器仅在客户端渲染。

  1. <client-only>
  2.     <vue-seamless-scroll :data="listData" class="seamless-warp">
  3.         <ul class="item">
  4.             <li v-for="item in listData">
  5.                 <span class="title" v-text="item.title"></span><span class="date" v-text="item.date"></span>
  6.             </li>
  7.         </ul>
  8.     </vue-seamless-scroll>
  9. </client-only>

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

继续阅读
Admin
  • 本文由 发表于 2020年5月15日09:51:12
  • 除非特殊声明,本站文章均为原创,转载请务必保留本文链接
Vue-Router + Webpack 路由懒加载实现 前端开发

Vue-Router + Webpack 路由懒加载实现

当打包构建应用时,Javascript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。结合 Vue 的异步组件...
Vue 项目如何分环境打包不同配置 前端开发

Vue 项目如何分环境打包不同配置

在项目开发中,我们的项目一般分为开发版、测试版、预发布版、生产版,Vue-cli 的默认环境一只有 dev 和 prod 两个,之前每次要发布测试版或预发布版都是需要手动修改代码中配置文件后打包,这样...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: