一、背景

在專案中使用最新版本的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時的報錯

按照文件編寫輪播圖相關的程式碼後

使用npm run dev執行專案後報錯如下：

Maximum call stack size exceeded
 

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