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 vue-awesome-swiper@2.6.7 --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時的報錯

按照文檔編寫輪播圖相關的代碼后

使用npm run dev運行項目后報錯如下：

Maximum call stack size exceeded

造成堆棧溢出的原因可能是使用了遞歸並寫錯了遞歸結束的條件
但在排除這些錯誤后，頁面依然報錯
這時我才發現這個輪播圖組件的命名是 'Swiper.vue'，與swiper這個依賴重名了
因此，在頁面根組件渲染 時，會發生堆棧溢出的錯誤
將輪播圖所在組件改名后，頁面就能正常運行了