快捷導(dǎo)航

詳解Vue.js使用Swiper.js在iOS<11時出現(xiàn)錯誤

更新時間：2018年09月10日 10:41:27 作者：52admin

這篇文章主要介紹了詳解Vue.js使用Swiper.js在iOS<11時出現(xiàn)錯誤，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

前言

swiper這是一個很強大的輪播展示工具，但往往也會有一些未知BUG，尤其是在手機端，由于性能局限，會導(dǎo)致效果和PC測試的時候有完全不一樣的效果

在H5項目中，需要用到翻頁效果，通過 Swiper 來實現(xiàn)，安裝 Swiper

npm i swiper -S

但是實際使用中，發(fā)現(xiàn)低版本 iOS < 11 會出現(xiàn)下面這個錯誤：

SyntaxError: Unexpected keyword 'const'. Const declarations are not supported in strict mode.

原因

Swiper.js 這個 npm 包里面還使用了 dom7 和 ssr-window，所以需要對這兩個插件進行 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"
  ]
}

參考：http://idangero.us/swiper/get-started/

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

基于vue2實現(xiàn)簡單的答題組件
這篇文章主要為大家詳細介紹了如何基于vue2實現(xiàn)簡單的答題組件,點擊正確的選項,該選項背景變綠色；點擊錯誤的選項,該選項背景變紅色,有需要的可以參考下
2024-12-12
vue如何使用formData傳遞文件類型的數(shù)據(jù)
這篇文章主要介紹了vue如何使用formData傳遞文件類型的數(shù)據(jù)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-05-05
vue中給el-radio添加tooltip并實現(xiàn)點擊跳轉(zhuǎn)方式
這篇文章主要介紹了vue中給el-radio添加tooltip并實現(xiàn)點擊跳轉(zhuǎn)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-04-04
Vue+Bootstrap實現(xiàn)簡易學(xué)生管理系統(tǒng)
這篇文章主要為大家詳細介紹了Vue+Bootstrap實現(xiàn)簡易學(xué)生管理系統(tǒng)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-02-02
Vue3配置路由ERROR in [eslint]報錯問題及解決
這篇文章主要介紹了Vue3配置路由ERROR in [eslint]報錯問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-10-10
vue-cli使用stimulsoft.reports.js的詳細教程
Stimulsoft?Reports.JS是一個使用JavaScript和HTML5生成報表的平臺。它擁有所有擁來設(shè)計，編輯和查看報表的必需組件。該報表工具根據(jù)開發(fā)人員數(shù)量授權(quán)而不是根據(jù)應(yīng)用程序的用戶數(shù)量。接下來通過本文給大家介紹vue-cli使用stimulsoft.reports.js的方法，一起看看吧
2021-12-12
Vue3+TypeScript實現(xiàn)二維碼生成組件
在?Web?應(yīng)用中,生成二維碼是常見的需求,本文介紹如何用?Vue3?和?TypeScript?開發(fā)一個二維碼生成組件,支持生成圖片或?canvas?形式的二維碼,并提供豐富的配置選項,感興趣的小伙伴跟著小編一起來看看吧
2024-04-04
前端框架學(xué)習(xí)總結(jié)之Angular、React與Vue的比較詳解
這篇文章主要跟大家分享了關(guān)于前端框架中Angular.js、React.js與Vue.js的全方位比較，文章介紹的非常詳細，對大家進行區(qū)分對比這三者之間的差異區(qū)別很有幫助，需要的朋友可以參考借鑒，下面來一起看看吧。
2017-03-03
VueCli3中兼容IE11配置的艱苦歷程
這篇文章主要介紹了VueCli3中兼容IE11配置的艱苦歷程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-05-05
Vue--keep-alive使用實例詳解
這篇文章主要介紹了Vue--keep-alive使用實例詳解,keep-alive標簽主要用于保留組件狀態(tài)或避免重新渲染，用示例代碼介紹Vue的keep-alive的用法，需要的朋友可以參考下
2022-08-08