vue-awesome-swiper踩坑总结

一、背景

在项目中使用最新版本的vue-awesome-swiper插件时，发现分页器的显示有bug
因此决定重新安装旧版本

注意：Swiper6 对应的是 vue-awesome-swiper的最新版本
接下来介绍的是基于Swiper2 的 vue-awesome-swiper的v2.6.7版本

二、全局安装

安装 swiper

npm install swiper -S

安装指定版本的 vue-awesome-swiper

npm install [email protected] --save

在main.js中 引入vue-awesome-swiper

import VueAwesomeSwiper from 'vue-awesome-swiper'

在main.js中 引入对应的CSS文件

import 'swiper/swiper-bundle.css'

注意：如果引入CSS的路径出错，就会导致“找不到swiper模块”的编译错误
建议大家直接打开项目根目录下的node_modules文件夹
找到vue-awesome-swiper中的CSS文件
再将此路径放入上面这条import语句中

在main.js中 全局注册vue-awesome-swiper

Vue.use(VueAwesomeSwiper)

三、使用swiper时的报错

按照文档编写轮播图相关的代码后

image.png

使用npm run dev运行项目后报错如下：

Maximum call stack size exceeded

造成堆栈溢出的原因可能是使用了递归并写错了递归结束的条件
但在排除这些错误后，页面依然报错
这时我才发现这个轮播图组件的命名是 'Swiper.vue'，与swiper这个依赖重名了
因此，在页面根组件渲染时，会发生堆栈溢出的错误
将轮播图所在组件改名后，页面就能正常运行了