在nuxt中使用vue-awesome-swiper

一、安装vue-awesome-swiper

npm install vue-awesome-swiper --save

二、安装swiper

npm install swiper --save

三、创建vue-awesome-swiper.js文件

在plugins目录下新建vue-awesome-swiper.js文件

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)

四、编辑nuxt.config.js文件

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

  plugins: [
    {src: "@/plugins/vue-awesome-swiper", ssr: false}
  ],

五、出现Cannot resolve "swiper/dist/css/swiper.css"问题解决

1.分析问题

首先去看一下node_modules目录下看看swiper.css目录下路径是否正确

5-1

结果发现swiper目录下并没有dist文件夹。说明可能是swiper版本的问题

2.确认swiper版本

5-2

发现安装了最新版swiper是6.1.2

3.变更swiper版本

去github上查看vue-awesome-swiper发现其使用的是swiper4：v3.1.3版本

image.png

修改package.json中swiper的版本号

  "dependencies": {
    "bootstrap": "^4.5.0",
    "bootstrap-vue": "^2.15.0",
    "nuxt": "^2.14.0",
    "swiper": "^3.1.3",
    "vue-awesome-swiper": "^4.1.1",
    "vuex": "^3.5.1"
  },

然后 npm install一下

image.png

至此运行成功了