Nuxt使用vue-awesome-swiper组件记录坑

商城项目采用nuxt架构，使用轮播图，选择目前最流行的vue-awesome-swiper作为基础组件。但是在使用过程中遇到的坑，着实让人难受。nuxt的版本是2.14.6。在vuecli中搭建和使用vue-awesome-swiper组件没有问题，但是添加ssr会一直报错。原来的组件切换到前一个。下一步按钮不显示，即使显示，点击也不会生效。排查后不知道是不是电脑硬件的问题。我们的使用要求需要自定义开关按钮（包括按钮行为）。这里直接是我们当前的组件代码。@mixinswiper-btn{背景颜色：#fff;边界半径：50%；位置：绝对；z-index:2;}.??swiper-wrapper{.swiper-slide{&:hover{cursor:pointer;}}.img-wrapperimg{边距：自动；宽度：200px；高度：100px；背景图像：线性渐变（灰色100%，透明0）；{@includeswiper-btn;左：5px;}.swiper-right-btn{@includeswiper-btn;right:5px;}.swiper-left-btn,.swiper-right-btn{&:hover{background-color:#ccc;}}</style>需要特别注意的是，这里的槽要在页面中的v-slot方法中使用，这里是v-slot的缩写，如果是不清楚的，去vue官网查看属性class="sweiper-slide"。这个属性不能丢失。这是sweiper获取子元素的源码。参考文章：Nuxt使用vue-awesome-sweiper挖坑