您现在的位置是：网站首页> 编程资料编程资料

Vue中引入swiper报错的问题及解决_vue.js_

2023-05-24 399人已围观

简介 Vue中引入swiper报错的问题及解决_vue.js_

首先上报错信息

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

都是由于版本问题惹得锅！！！

刚开始我的swiper安装的是最新版，也就是7.0的版本，但是报各种错，我就降成了6.0的版本。

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

查询得知VUE2对于高版本的swiper可能兼容性不好，所以我卸载了6.0的版本，安装了老版本

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

但是还是报错，错误信息如下：

Cannot set property ‘params‘ of undefined

查询得知

@3.x 版本的 ---- 引入模块时使用小写

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

@4.x 版本的 ---- 引入模块时使用大写

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‘

对于第二个报错的原因，github官网上已经给出原因

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版本

所以把导入css的代码替换为import 'swiper/swiper-bundle.css'