Vue引入swiper.css报错(已解决)
Vue引入swiper.min.css报错Module not found: Error: Package path ./swiper.min.css is not exported from package C:\Users\yoyang\Desktop\vue\test2022\node_modules\swiper (see exports field in C:\Users\yoyang\
·
报错信息如下:
Module not found: Error: Package path ./swiper.css is not exported from package C:\Users\yoyang\Desktop\vue\test2022\node_modules\swiper (see exports field in C:\Users\yoyang\Desktop\vue\test2022\node_modules\swiper\package.json)
问题产生的原因就是 vue2 对于 swiper 最新版本的兼容性差,只需要重新安装老版本的 swiper ,如swiper@6.8.1 即可
解决:
1、下载旧版本的swiper
npm i swiper@6.8.1 --save
2、重启项目
npm run serve
3、引入swiper
import Swiper from 'swiper/bundle'
import 'swiper/swiper-bundle.css'
这样swiper组件就可以正常使用啦
<template>
<div class="swiper-container yang">
<div class="swiper-wrapper">
<slot></slot>
</div>
<div class="swiper-pagination"></div>
</div>
</template>
<script>
import Swiper from 'swiper'
import 'swiper/swiper.min.css'
export default {
mounted () {
new Swiper('.yang', {
pagination: {
el: '.swiper-pagination'
},
loop: this.loop,
autoplay: {
delay: 2500,
disableOnInteraction: false
}
})
}
}
</script>
详细的使用方法可以去官网看看:点此跳转swiper官网
更多推荐
已为社区贡献1条内容
所有评论(0)