vue中使用swiper报错问题及解决方法

最近开发中遇到了使用swiper组件时候一直报错问题，后来发现是版本导致的问题

1.下载这两个版本插件：
“swiper”: “^4.5.1”,
“vue-awesome-swiper”: “^4.0.4”,

npm install vue-awesome-swiper@4.0.4 --save -dev
npm install swiper@4 --save -dev

2.在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.在div中使用

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