In recent development, we encountered the problem of always reporting errors when using swiper components. Later, it was found that the problem was caused by the version

1. Download these two versions of plug-ins:
“wiper”: “^ 4.5.1”,
“Vue awesome wiper”: “^ 4.0.4”,

npm install [email protected] --save -dev
npm install [email protected] --save -dev

2. Introduce in the component of xxxx.vue

<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
export default {
  name: "index",
  components: {
    swiper,
    swiperSlide
  }, 
};
</script>

3. Use in div

<swiper ref="mySwiper" v-bind:options="swiperOptions">
          <swiper-slide v-for="(item, index) in slideList" :key="index">
            <a v-bind:href="'/#/product'%20+%20'item.id'">
              <img v-bind:src="item.img" alt />
            </a>
</swiper-slide>