近日在開發(fā)Nuxt項(xiàng)目的時(shí)候，發(fā)現(xiàn)nuxt在使用vue-awesome-swiper插件時(shí)，總是因?yàn)槌霈F(xiàn)各種報(bào)錯(cuò)而無法正常使用，加上網(wǎng)上搜到的所謂解決方法都解決不了——要么css路徑錯(cuò)誤，要么輪播圖能顯示卻卡住根本不能用等等，令人相當(dāng)無奈。（而且搜到的內(nèi)容大部分都是復(fù)制粘貼別人的，千篇一律又無法解決問題，這種行為真該讓人唾棄）。

經(jīng)過本人總結(jié)，總算找到了正確的在Nuxt項(xiàng)目里正確使用vue-awesome-swiper的方法。

首先，安裝vue-awesome-swiper：

//只要安裝這一個(gè)插件就可以了，不需要再安裝什么別的swiper等插件。（注意版本號(hào)，別的版本可能出現(xiàn)css地址錯(cuò)誤）
cnpm i vue-awesome-swiper@3.1.3 -S

第二步，在plugins文件夾下新建js文件，或者在原本就有的js文件里記載vue-awesome-swiper。

例如我創(chuàng)建的文件就是swiper.js，代碼如下：

import VueAwesomeSwiper from 'vue-awesome-swiper'

//加載swiper
Vue.use(VueAwesomeSwiper)

之后，在nuxt.config.js文件里配置好css，以及申明加載vue-awesome-swiper的js文件。

代碼如下：

  css: [
    'swiper/dist/css/swiper.css'
  ],
  plugins: [
    {src: '~/plugins/swiper.js', ssr: false},        //swiper.js
  ]

到這里就已經(jīng)可以在各頁面里使用了。
代碼如下：

//html代碼
<div class="swiper">
  <swiper ref="mySwiper" :options="swiperOptions">
    <swiper-slide
      v-for="(item, index) in swiperList"
      :key="index"
      :style="{backgroundImage: 'url('+item.imgUrl+')'}">
    </swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
    <div class="swiper-button-prev swiper-button-white" slot="button-prev"></div>
    <div class="swiper-button-next swiper-button-white" slot="button-next"></div>
  </swiper>
</div>

//js代碼 -- swiperOptions
swiperOptions: {
  spaceBetween: 30,
  loop: true,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev'
  },
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
  autoplay: {
    delay: 5000,
  }
},

//swiperList代碼
swiperList: [
  {
    imgUrl: require('~/assets/img/swiper1.jpg'),
  },
  {
    imgUrl: require('~/assets/img/swiper2.jpg'),
  },
  { 
    imgUrl: require('~/assets/img/swiper3.jpg'),
  }
]

//scss代碼
<style lang="scss" scoped>
.swiper {
  width: 100%;

  .swiper-container {
    width: 100%;
    height: 785px;

    .swiper-slide {
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
    }

    .swiper-pagination{
      /deep/ .swiper-pagination-bullet{
        opacity: .5;

        &.swiper-pagination-bullet-active{
          background-color: rgba(255, 255, 255, 1) !important;
        }
      } 
    }
  }
}
<style>

SwiperOptions配置

請(qǐng)查看github的vue-awesome-swiper的官方示例：
https://github.surmon.me/vue-awesome-swiper/