這篇文章主要介紹ue.js使用Swiper.js在iOS<11時(shí)出現(xiàn)錯(cuò)誤,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
前言
swiper這是一個(gè)很強(qiáng)大的輪播展示工具,但往往也會(huì)有一些未知BUG,尤其是在手機(jī)端,由于性能局限,會(huì)導(dǎo)致效果和PC測(cè)試的時(shí)候有完全不一樣的效果
在H5項(xiàng)目中,需要用到翻頁(yè)效果,通過(guò) Swiper 來(lái)實(shí)現(xiàn),安裝 Swiper
npm i swiper -S
但是實(shí)際使用中,發(fā)現(xiàn)低版本 iOS < 11 會(huì)出現(xiàn)下面這個(gè)錯(cuò)誤:
SyntaxError: Unexpected keyword 'const'. Const declarations are not supported in strict mode.
原因
Swiper.js 這個(gè) npm 包里面還使用了 dom7
和 ssr-window
,所以需要對(duì)這兩個(gè)插件進(jìn)行 Babel 轉(zhuǎn) 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" ] }
以上是“ue.js使用Swiper.js在iOS<11時(shí)出現(xiàn)錯(cuò)誤”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!