详解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 关闭当前页、关闭当前标签tagsView的实现方法
这篇文章主要介绍了Vue 关闭当前页、关闭当前标签tagsView,主要有两种方式，一种是在vue页面直接实现，另一种在js文件中写自定义函数，在vue页面中调用，本文通过实例代码介绍的非常详细，需要的朋友可以参考下
2022-08-08
vue+element下日期组件momentjs转换赋值问题解决
这篇文章主要介绍了vue+element下日期组件momentjs转换赋值问题,记录下使用momentjs转换日期字符串赋值给element的日期组件报错问题，需要的朋友可以参考下
2024-02-02
Vite打包性能优化之开启Gzip压缩实践过程
vue前端项目发布的时候,打包可实现gzip格式的压缩,下面这篇文章主要给大家介绍了关于Vite打包性能优化之开启Gzip压缩的相关资料,需要的朋友可以参考下
2022-12-12
vue和H5 draggable实现拖拽并替换效果
这篇文章主要为大家详细介绍了vue和H5 draggable实现拖拽并替换效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-07-07
vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)
这篇文章主要介绍了vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-06-06
详解element-ui 组件el-autocomplete使用踩坑记录
最近使用了el-autocomplete组件，本文主要介绍了element-ui 组件el-autocomplete使用踩坑记录，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-03-03
vue开发中关于axios的封装过程
这篇文章主要介绍了vue开发中关于axios的封装过程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
理解Proxy及使用Proxy实现vue数据双向绑定操作
这篇文章主要介绍了理解Proxy及使用Proxy实现vue数据双向绑定操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07
Vue中使用setTimeout问题
这篇文章主要介绍了Vue中使用setTimeout问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-01-01
vue.config.js中配置分包策略及常见的配置选项
在Vue.js中分包（Code Splitting）是一种将应用程序代码拆分为不同的块或包的技术,从而在需要时按需加载这些包,下面这篇文章主要给大家介绍了关于vue.config.js中配置分包策略及常见的配置选项的相关资料,需要的朋友可以参考下
2024-02-02