執行 npm install --save swiper/css/swiper.css 失敗以及autoplay原配置不生效解決方案

最近 Vue 項目中用到的觸摸滑動插件 Swiper，執行 npm install swiper vue-awesome-swiper --save 安裝 Swiper 后，在 main.js 中進行引入，

import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'

但是運行項目出現 ERROR：

 

 

 

執行 npm install --save swiper/css/swiper.css 后提示無法安裝

問題出在 main.js 中 import 'swiper/css/swiper.css' 這句話上
應該替換為 import 'swiper/swiper-bundle.css'
在 Swiper 的 Github上有所提及原因，是Swiper 的版本問題，一般swiper6.0版本以上都得引入
 import 'swiper/swiper-bundle.css'

同時發現autopaly按照之前的配置方式不生效。原因是：官方已經將autoplay單獨的分離了出來，需要單獨引入。

// main.js文件
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/swiper-bundle.min.css'
Vue.use(VueAwesomeSwiper)

import Swiper2, { Navigation, Pagination, EffectFade, Autoplay } from 'swiper'
Swiper2.use([Navigation, Pagination, EffectFade, Autoplay])

data:function(){
return {
　　　　swiperOption: {
　　　　pagination: {
　　　　el: '.swiper-pagination'
　　},
　　//autoplay:true（配置這個則為默認的切換時間，使用下面的autoplay配置則可以設置delay參數來控制banner的切換時間）
　　autoplay: {
　　　　disableOnInteraction: false,
　　　　delay:3000
　　　　}
　　}

}

}