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

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