Vue引入swiper.css报错（已解决）

报错信息如下：

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官网