詳解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
但是實際使用中，發(fā)現低版本 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路由跳轉傳遞參數的三種方式以及相關代碼，需要的朋友們可以學習下。2020-05-05
深入淺析golang zap 日志庫使用（含文件切割、分級別存儲和全局使用等）
這篇文章主要介紹了golang zap 日志庫使用（含文件切割、分級別存儲和全局使用等）,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2020-02-02
解決Vue中引入swiper,在數據渲染的時候,發(fā)生不滑動的問題
今天小編就為大家分享一篇解決Vue中引入swiper,在數據渲染的時候,發(fā)生不滑動的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要為大家詳細介紹了vue項目實現登陸注冊效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
vue draggable resizable gorkys與v-chart使用與總結
這篇文章主要介紹了vue draggable resizable gorkys與v-chart使用與總結,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-09-09
這篇文章主要介紹了vue3.0中setup的兩個注意點，本文通過兩種用法給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-10-10
這篇文章主要介紹了vue.config.js中配置Vue的路徑別名的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-02-02
Vue中computed(計算屬性)和watch(監(jiān)聽屬性)的用法及區(qū)別說明
這篇文章主要介紹了Vue中computed(計算屬性)和watch(監(jiān)聽屬性)的用法及區(qū)別說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要介紹了vue+freemarker中遇到的坑及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了vue 實現動態(tài)路由的方法，文中示例代碼非常詳細，幫助大家更好的理解和學習，感興趣的朋友可以了解下2020-07-07