nuxt 使用 swiper的坑

记录一下使用这个踩过的坑 

正常是开发环境是没问题的,部署到生产环境首页的轮播会失效, 特此记录一下

旧的引用方式

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'

//引入样式
import 'swiper/dist/css/swiper.css'

Vue.use(VueAwesomeSwiper, /* { 全局组件的默认选项 } */)

这个样子会在生产环境css样式缺失导致swiper失效

正确打开方式如下

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
export default () => {
  Vue.use(VueAwesomeSwiper)
}

nuxt.config.js

css: [
    "swiper/dist/css/swiper.css",
  ],

swiper版本:

                "swiper": "^3.4.2",