Vue 新版Swiper導入css錯誤

1.Vue中安裝Swiper 官方命令

npm install swiper vue-awesome-swiper --save  1.1 npm install vue-awesome-swiper@3.1.3 --save-dev //下載vue-awesome-swiper

2.根據官方命令，會默認安裝最新Swiper6版本，但由於與之前版本不兼容，故出現一下錯誤

3.解決方案一  新版本Swiper 請使用一下路徑引入

import 'swiper/swiper-bundle.css'

<script>

import 'swiper/swiper-bundle.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
  name: 'Banner',
  data () {
    return {
      swiperOption: {
        loop: true, // 循環模式選項
        autoplay: {
          delay: 1000, // 自動切換的時間間隔，單位ms
          stopOnLastSlide: false, // 當切換到最后一個slide時停止自動切換
          disableOnInteraction: false // 用戶操作swiper之后，是否禁止autoplay。
        },
        // 如果需要分頁器
        pagination: {
          el: '.swiper-pagination'
        },
        observer: true,
        observeParents: true,
        observeSlideChildren: true
      }
    }
  },
  props: {
    banners: {
      type: Array,
      default: () => [],
      required: true
    }
  },
  components: {
    swiper,
    swiperSlide
  }
}
</script>

4.解決方案二 安裝指定Swiper老版本命令 

npm install swiper swiper@3.4.2 --save-dev

<script>
import 'swiper/dist/css/swiper.css'  //老版本使用此路徑引入
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
  name: 'Banner',
  data () {
    return {
      swiperOption: {
        loop: true, // 循環模式選項
        autoplay: {
          delay: 1000, // 自動切換的時間間隔，單位ms
          stopOnLastSlide: false, // 當切換到最后一個slide時停止自動切換
          disableOnInteraction: false // 用戶操作swiper之后，是否禁止autoplay。
        },
        // 如果需要分頁器
        pagination: {
          el: '.swiper-pagination'
        },
        observer: true,
        observeParents: true,
        observeSlideChildren: true
      }
    }
  },
  props: {
    banners: {
      type: Array,
      default: () => [],
      required: true
    }
  },
  components: {
    swiper,
    swiperSlide
  }
}
</script>