Nuxt中引入vue-awesome-swiper遇到的问题及解决方案

  首先描述下开发环境：

> node -v v12.18.4 > npm -v 6.14.6

  目前swiper的版本已经更新到6.3.2，一些配置与之前版本有所不同

安装

npm install swiper vue-awesome-swiper --save

可以在package.json中看到swiper及vue-awesome-swiper安装的版本

配置

1、在plugins中新建vue-swiper.js文件，并保存以下内容：

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

2、在nuxt.config.js配置文件中添加如下内容：

css: [ 'swiper/swiper-bundle.css' ], plugins: [ '@/plugins/vue-swiper' ],

由于这是为测试本插件而创建的demo，所以配置比较简单，大家根据自己的项目在对应位置添加即可

注意

官方文档中对于不同版本的配置有明确的说明 如果css的引入未匹配对应的Swiper版本就会报错

ERROR Could not compile template xxx\\node_modules\\@nuxt\\vue-app\\template\\App.js: Cannot resolve "swiper/dist/css/swiper.css" from "xxx\swiper\dist\css\swiper.css" at node_modules\@nuxt\builder\dist\builder.js:6058:17 at async Promise.all (index 4) at async Builder.compileTemplates (node_modules\@nuxt\builder\dist\builder.js:6036:5) at async Builder.generateRoutesAndFiles (node_modules\@nuxt\builder\dist\builder.js:5723:5) at async Builder.build (node_modules\@nuxt\builder\dist\builder.js:5635:5) at async Object._buildDev (node_modules\@nuxt\cli\dist\cli-dev.js:106:5) at async Object.startDev (node_modules\@nuxt\cli\dist\cli-dev.js:64:7) at async Object.onWatchRestart (node_modules\@nuxt\cli\dist\cli-dev.js:135:5) at async Nuxt.callHook (node_modules\hable\dist\hable.js:1:1021) at async FSWatcher.<anonymous> (node_modules\@nuxt\builder\dist\builder.js:6259:9)

---

更多资料可参考GitHub中的vue-awesome-swiper