转载于:https://www.jb51.net/article/147140.htm(侵删)
这篇文章主要介绍了详解Vue.js使用Swiper.js在iOS<11时出现错误,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
前言
swiper这是一个很强大的轮播展示工具,但往往也会有一些未知BUG,尤其是在手机端,由于性能局限,会导致效果和PC测试的时候有完全不一样的效果
在H5项目中,需要用到翻页效果,通过 Swiper 来实现,安装 Swiper
1 |
|
但是实际使用中,发现低版本 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 |
|
Vue CLI 3.x 下
在 vue.config.js 中增加 transpileDependencies 配置
1 2 3 4 5 6 7 |
|
transpileDependencies无效怎么办?
在使用vue时,node_modules里面的文件不会经过babel再编译一遍,所有有些库里使用了const之类的es6属性,而且这些库在打包的是也没有考虑兼容ie,比如常用的swiper。所以最后导致项目在ie中会报错。
在网上查了一番以后发现,可以指定一个库在打包的时候需要编译,使用transpileDependencies这个属性
在vue.config.js中配置
module.exports = {
transpileDependencies: ['swiper'],
}
但是配置完再打包,并没有变化,查询一番以后发现有人说可以,有人说无效
研究半天后发现
安装依赖的时候要使用npm,不能使用cnpm
把原来的依赖全部删除,再用npm重新安装就行了