详解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/
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了如何基于vue2实现简单的答题组件,点击正确的选项,该选项背景变绿色；点击错误的选项,该选项背景变红色,有需要的可以参考下2024-12-12
这篇文章主要介绍了vue如何使用formData传递文件类型的数据问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
vue中给el-radio添加tooltip并实现点击跳转方式
这篇文章主要介绍了vue中给el-radio添加tooltip并实现点击跳转方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
这篇文章主要为大家详细介绍了Vue+Bootstrap实现简易学生管理系统，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-02-02![Vue3配置路由ERROR in [eslint]报错问题及解决](//img.jbzj.com/images/xgimg/bcimg4.png)
Vue3配置路由ERROR in [eslint]报错问题及解决
这篇文章主要介绍了Vue3配置路由ERROR in [eslint]报错问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
vue-cli使用stimulsoft.reports.js的详细教程
Stimulsoft Reports.JS是一个使用JavaScript和HTML5生成报表的平台。它拥有所有拥来设计，编辑和查看报表的必需组件。该报表工具根据开发人员数量授权而不是根据应用程序的用户数量。接下来通过本文给大家介绍vue-cli使用stimulsoft.reports.js的方法，一起看看吧2021-12-12
在 Web 应用中,生成二维码是常见的需求,本文介绍如何用 Vue3 和 TypeScript 开发一个二维码生成组件,支持生成图片或 canvas 形式的二维码,并提供丰富的配置选项,感兴趣的小伙伴跟着小编一起来看看吧2024-04-04
前端框架学习总结之Angular、React与Vue的比较详解
这篇文章主要跟大家分享了关于前端框架中Angular.js、React.js与Vue.js的全方位比较，文章介绍的非常详细，对大家进行区分对比这三者之间的差异区别很有帮助，需要的朋友可以参考借鉴，下面来一起看看吧。2017-03-03
这篇文章主要介绍了VueCli3中兼容IE11配置的艰苦历程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
这篇文章主要介绍了Vue--keep-alive使用实例详解,keep-alive标签主要用于保留组件状态或避免重新渲染，用示例代码介绍Vue的keep-alive的用法，需要的朋友可以参考下2022-08-08
![Vue3配置路由ERROR in [eslint]报错问题及解决](http://img.jbzj.com/images/xgimg/bcimg4.png)
最新评论