使用：
main.js 全局引入swiper样式报错：
import 'swiper/swiper-bundle.min.css'ERROR in ./src/main.js 10:0-38
Module not found: Error: Package path ./swiper-bundle.min.css is not exported from package E:\JavaScrip\shoppingWeb\shoppingweb\node_modules\swiper
(see exports field in E:\JavaScrip\shoppingWeb\shoppingweb\node_modules\swiper\package.json)
查看了swiper的package.json配置,已经重定向了：
安装：
npm install swiper@7 -S
出来的版本： swiper@7.4.1
官网：https://www.swiper.com.cn/download/index.html
swiper引入改成以下：
main.js 全局引入样式：
import 'swiper/css/bundle' //"./swiper-bundle.min.css"模版vue文件引入模块：
import Swiper from 'swiper/bundle'; //可以实现自动轮播 对应"./swiper-bundle.esm.js"对应的new Swiper，需要Dom结构完成之后才new，所以用vue的$nextTick()异步回调用：
methods: {
initSwiper() {
this.$nextTick(() => {
// setTimeout(()=>{
const mySwiper = new Swiper('.listcontainerswiper', {
direction: 'horizontal', // vertical 垂直切换选项
speed: 2000,
loop: true, // 循环模式选项
autoplay: {
delay: 1000,
},
spaceBetween: 30,
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
clickable: true,
},
// 如果需要前进后退按钮
navigation: {
clickable: true,
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
// },2000)
})
}
},
mounted() {//组件加载完毕，有结构
//vuex派发action: 发送Ajax请求，拿到轮播图数据
this.$store.dispatch('homeStore/getBannerList');
//在new之前，页面必需要有swiper的dom结果
//前面dispatch是异步，会造成后面的swiper创建之前结构没有完成
this.initSwiper()
}然后在家里的电脑可能有些包版本不一样：
将上面引入样式与引入包改成：
import Swiper from 'swiper/swiper-bundle.esm.js';
import 'swiper/swiper-bundle.min.css'效果：
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/101538.html
