详解Vue.js使用Swiper.js在iOS＜11时出现错误

转载于：https://www.jb51.net/article/147140.htm（侵删）

 

这篇文章主要介绍了详解Vue.js使用Swiper.js在iOS<11时出现错误，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

前言

swiper这是一个很强大的轮播展示工具，但往往也会有一些未知BUG，尤其是在手机端，由于性能局限，会导致效果和PC测试的时候有完全不一样的效果

在H5项目中，需要用到翻页效果，通过 Swiper 来实现，安装 Swiper

1	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 文件中修改

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

// ... 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 配置

1 2 3 4 5 6 7

module.exports = {   transpileDependencies: [     "swiper",     "dom7",     "ssr-window"   ] }

 

transpileDependencies无效怎么办？

在使用vue时，node_modules里面的文件不会经过babel再编译一遍，所有有些库里使用了const之类的es6属性，而且这些库在打包的是也没有考虑兼容ie，比如常用的swiper。所以最后导致项目在ie中会报错。

在网上查了一番以后发现，可以指定一个库在打包的时候需要编译，使用transpileDependencies这个属性
在vue.config.js中配置

 

module.exports = {
  transpileDependencies: ['swiper'],
}

但是配置完再打包，并没有变化，查询一番以后发现有人说可以，有人说无效
研究半天后发现

安装依赖的时候要使用npm，不能使用cnpm

把原来的依赖全部删除，再用npm重新安装就行了