vue-awesome-swiper安装使用时的坑

关于vue-awesome-swiper

官网：https://github.com/surmon-china/vue-awesome-swiper

官方示例：https://github.surmon.me/vue-awesome-swiper/

 

概述：

vue-awesome-swiper是基于swiper的Vue组件。是swiper推荐的在vue中使用swiper的方式。

 

关于Swiper

Swiper 是一款免费以及轻量级的移动设备触控滑块的js框架，使用硬件加速过渡（如果该设备支持的话）。主要使用于移动端的网站、移动web apps，native apps和hybrid apps。主要是为IOS而设计的，同时，在Android、WP8系统也有着良好的用户体验，Swiper从3.0开始不再全面支持PC端。因此，如需在PC上兼容更多的浏览器，可以选择Swiper2.x（甚至支持IE7）。

Swiper中文网：

https://www.swiper.com.cn/

 

Swiper版本最新为Swiper6

旧版本包括5、4、3、2

版本演进说明：https://www.swiper.com.cn/about/us/index.html

 

为什么强调版本？

因为vue-awesome-swiper根据不同的swiper版本也对应有不同的版本，主要有三个版本：

Vue-Awesome-Swiper - v2.6.7 对应 Swiper3

Vue-Awesome-Swiper - v3.1.3 对应 Swiper4

Vue-Awesome-Swiper - v4.1.1 对应 Swiper6（截止2020/08/10）

 

因此对于网上找到的使用教程，或是接手原有项目中应用到了Vue-Awesome-Swiper需要改造，应先确认其版本，对应到相应的Swiper版本，再到Swiper中文网中查看相应的教程，否则会出现各种各样的问题。

 

安装使用中遇到的坑：

 

当按照官网：

https://github.com/surmon-china/vue-awesome-swiper

的教程一步步完成组件安装，引入，注册后，却报错：

1.Module not found: Error: Can't resolve 'swiper/css/swiper.css' in ...

2.Module not found: Error: Can't resolve 'swiper/swiper-bundle.css' in ...

 

查看package.json，发现安装swiper是4版本的，而安装的Vue-Awesome-Swiper是4.1.1。

觉得可能是由于版本号不对应导致（应该是原先项目已先安装了4版本的swiper），因此将vue-awesome-swiper和swiper都卸载重新安装：

 

npm uninstall vue-awesome-swiper

npm uninstall swiper

npm install swiper vue-awesome-swiper --save

 

依然报错：

Module build failed: Error: ENOENT: no such file or directory, open 'D:\developer\git\xxx\node_modules\swiper\dist\js\swiper.esm.bundle.js'

进入node_modules目录查找，确实没有在路径下发现swiper.esm.bundle.js这个文件，而是放在了外层的目录，说明是build的时候出了什么问题。

 

百度最接近的答案是：

vue + swiper 踩坑记实（dom7、es6）

https://www.jianshu.com/p/54709ba140aa

 

其中有建议降级处理

因此尝试卸载重新安装旧版本：

npm uninstall vue-awesome-swiper

npm uninstall swiper

npm install swiper@4.5.1

npm install vue-awesome-swiper@3.1.3

 

此时项目依然报错：

1.Module not found: Error: Can't resolve 'swiper/css/swiper.css' in ...

2.Module not found: Error: Can't resolve 'swiper/swiper-bundle.css' in ...

不过这是由于版本变化导致css文件位置改变导致的，将导入的语句从：

 

import 'swiper/css/swiper.css'

import 'swiper/swiper-bundle.css'

修改为：

import 'swiper/dist/css/swiper.css'

即可

 

修改后加入Html标签

<swiper :options="swiperOption" ref="mySwiper">

<!-- slides -->

<swiper-slide>I'm Slide 1</swiper-slide>

<swiper-slide>I'm Slide 2</swiper-slide>

<swiper-slide>I'm Slide 3</swiper-slide>

<!-- Optional controls -->

<div class="swiper-pagination" slot="pagination"></div>

</swiper>

 

报错：

Cannot set property 'params' of undefined

原因依然是版本间引入的语句不一致导致的

将组件引入语句从

import { Swiper, SwiperSlide } from 'vue-awesome-swiper'

修改为：

import { swiper, swiperSlide } from 'vue-awesome-swiper'

即可

参见Github Issues：

https://github.com/surmon-china/vue-awesome-swiper/issues/499

 

至此安装的问题全部解决。

 

总结：

建议一开始就安装vue-awesome-swiper 3.1.3版，安装对应的swiper版本

然后全部按照3.1.3版本的文档来使用即可。

 

附：

vue-awesome-swiper 3.1.3版地址：

https://github.com/surmon-china/vue-awesome-swiper/tree/v3.1.3