快捷導(dǎo)航

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

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

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

前言

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"
  ]
}

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

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

您可能感興趣的文章:

相關(guān)文章

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