解决vue中使用swiper 插件出错的问题

• 解决办法：
• 解决方式如下：

由于我自己在写一个demo时候用到了该插件，出现了一些问题，所以就简单查了一下该插件的用法以及一些常见的错误

1.出现Get …/maps/swiper.min.js.map 500(Internal Server Error)

使用min版本时缺少Source Map文件

1. 禁止Source Map提示，删除swiper.min.js文件的最后一行//# sourceMappingURL=swiper.min.js.map即可

2. 如需要使用Source Map，完整包里面有该文件swiper.min.js.map，请放在相应的位置。关于Source Map

2 .出现不能自动轮播，分页点点不显示

解决办法：

install 加版本号。

由于vue-awesome-swiper插件包的版本问题，可能会出现左右箭头点击失效的情况

解决方式如下：

npm uninstallvue-awesome-swiper –save

npm [email protected] –save

安装完3.1.3的版本后，重新启动查看就解决了

3.出现Error in render: “TypeError: Cannot set property ‘params’ of undefined” —跟版本号有关系，4.0 版本首字母大写，3.0版本，首字母小写。

答案链接：https://github.com/surmon-china/vue-awesome-swiper/issues/499

如果使用的是3.x版本[email protected],导入代码如下:

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

如果使用的是4.x版本[email protected],导入代码如下:

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

4.出现 Uncaught ReferenceError: Swiper is not defined at…

可能是没有加载JS文件或位置错误

解决方式如下：

下载文件包并在页面中加载Swiper的JS和CSS文件，或使用Swiper的CDN服务加载文件，加载后再初始化Swiper

Vue中使用Swiper的用法如下：

第一种：全局引入

在main.js中

 import VueAwesomeSwiper from 'vue-awesome-swiper'; import "swiper/dist/css/swiper.css"; Vue.use(VueAwesomeSwiper)

第二种：局部引入

在所用模块的js文件中

 import { swiper, swiperSlide } from "vue-awesome-swiper"; import "<p>本文来源gao!%daima.com搞$代*!码$网9</p>swiper/dist/css/swiper.css"; export default { components: { swiper, swiperSlide } }

在.vue文件中,左右箭头放在轮播图的外面，代码如下：

   <div class="swiper-content">{{item}}</div><div class="swiper-pagination"></div><div class="swiper-button-prev"></div><div class="swiper-button-next"></div>

在.vue文件中,左右箭头放在轮播图的里面，代码如下：

   <div class="swiper-content">{{item}}</div><div class="swiper-pagination"></div><div class="swiper-button-prev"></div><div class="swiper-button-next"></div>

上面swiperOption的配置信息如下，具体请参考官网：https://www.swiper.com.cn/api/index.html