首先上報(bào)錯(cuò)信息

-----------更新-------------------------------------------

都是由于版本問題惹得鍋?。?！

剛開始我的swiper安裝的是最新版，也就是7.0的版本，但是報(bào)各種錯(cuò)，我就降成了6.0的版本。

頁面是可以正常顯示出來了，但是我的swiper的options配置完全不起作用,不能自動播放，也不顯示分頁器注意。

查詢得知VUE2對于高版本的swiper可能兼容性不好，所以我卸載了6.0的版本，安裝了老版本

npm install swiper@5 vue-awesome-swiper@3 -S

但是還是報(bào)錯(cuò)，錯(cuò)誤信息如下：

Cannot set property ‘params‘ of undefined

查詢得知

@3.x 版本的 ---- 引入模塊時(shí)使用小寫

import { swiper, swiperSlide } from “vue-awesome-swiper”;

@4.x 版本的 ---- 引入模塊時(shí)使用大寫

import { Swiper, SwiperSlide } from “vue-awesome-swiper”;

我改成小寫之后終于成功了，界面完好顯示

-----------更新-------------------------------------------

These dependencies were not found:

swiper in ./node_modules/vue-awesome-swiper/dist/vue-awesome-swiper.jsswiper/css/swiper.css in ./node_modules/cache-loader/dist/cjs.js??ref–12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref–0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Banner.vue?vue&type=script&lang=js&

To install them, you can run: npm install --save swiper swiper/css/swiper.css‘

對于第二個(gè)報(bào)錯(cuò)的原因，github官網(wǎng)上已經(jīng)給出原因

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

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'

// import style (>= Swiper 6.x)
import 'swiper/swiper-bundle.css'

// import style (<= Swiper 5.x)
import 'swiper/css/swiper.css'

Vue.use(VueAwesomeSwiper, /* { default options with global component } */)

去到package.json里面查看安裝的swiper的版本號，為7.x版本

所以把導(dǎo)入css的代碼替換為import 'swiper/swiper-bundle.css'

對于第一個(gè)錯(cuò)誤原因，是由于swiper的版本過高問題導(dǎo)致的，卸載當(dāng)前版本：npm uninstall --save swiper

下載swiper6.x版本

npm install --save swiper@6.8.1

所有報(bào)錯(cuò)問題解決。

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評論