Problems and solutions of error reporting in using swiper in Vue

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 swiper@4 --save -dev

2. Introduce in the component of xxxx.vue

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

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''">
              <img v-bind:src="item.img" alt />

Read More: