详解Vue.js使用Swiper.js在iOS<11时出现错误
更新时间：2018年09月10日 10:41:27 作者：52admin
这篇文章主要介绍了详解Vue.js使用Swiper.js在iOS<11时出现错误，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
前言
swiper这是一个很强大的轮播展示工具，但往往也会有一些未知BUG，尤其是在手机端，由于性能局限，会导致效果和PC测试的时候有完全不一样的效果
在H5项目中，需要用到翻页效果，通过 Swiper 来实现，安装 Swiper
npm i swiper -S
但是实际使用中，发现低版本 iOS < 11 会出现下面这个错误：
SyntaxError: Unexpected keyword 'const'. Const declarations are not supported in strict mode.
原因
Swiper.js 这个 npm 包里面还使用了 dom7 和 ssr-window，所以需要对这两个插件进行 Babel 转 ES5
解决方案
Vue CLI 2.x 下，在 build/webpack.base.config.js 文件中修改
// ...
modules: {
rules: [
// ...
{
test: /\.js$/,
loader: 'babel-loader',
include: [
resolve('src'),
resolve('test'),
resolve('node_modules/swiper/dist/js/'),
resolve('node_modules/webpack-dev-server/client'),
// 新增
resolve('node_modules/swiper'),
resolve('node_modules/dom7'),
resolve('node_modules/ssr-window')
]
},
// ...
]
}
// ...
Vue CLI 3.x 下
在 vue.config.js 中增加 transpileDependencies 配置
module.exports = {
transpileDependencies: [
"swiper",
"dom7",
"ssr-window"
]
}
参考：http://idangero.us/swiper/get-started/
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
在本篇文章和里小编给各位总结了关于vue路由跳转传递参数的三种方式以及相关代码，需要的朋友们可以学习下。2020-05-05
深入浅析golang zap 日志库使用（含文件切割、分级别存储和全局使用等）
这篇文章主要介绍了golang zap 日志库使用（含文件切割、分级别存储和全局使用等）,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2020-02-02
解决Vue中引入swiper,在数据渲染的时候,发生不滑动的问题
今天小编就为大家分享一篇解决Vue中引入swiper,在数据渲染的时候,发生不滑动的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要为大家详细介绍了vue项目实现登陆注册效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
vue draggable resizable gorkys与v-chart使用与总结
这篇文章主要介绍了vue draggable resizable gorkys与v-chart使用与总结,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-09-09
这篇文章主要介绍了vue3.0中setup的两个注意点，本文通过两种用法给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2021-10-10
这篇文章主要介绍了vue.config.js中配置Vue的路径别名的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-02-02
Vue中computed(计算属性)和watch(监听属性)的用法及区别说明
这篇文章主要介绍了Vue中computed(计算属性)和watch(监听属性)的用法及区别说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
这篇文章主要介绍了vue+freemarker中遇到的坑及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要介绍了vue 实现动态路由的方法，文中示例代码非常详细，帮助大家更好的理解和学习，感兴趣的朋友可以了解下2020-07-07
最新评论