Vue.js 使用 Swiper.js 在 iOS11 时出现错误

淩亂°似流年 2022-04-10 01:39 243阅读 0赞

## 前言 ##

在H5项目中，需要用到翻页效果，通过 Swiper 来实现，安装 Swiper

npm i swiper -S

但是实际使用中，发现低版本 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...][http_idangero.us_swiper_get...]

原文地址：[Vue.js 使用 Swiper.js 在 iOS < 11 时出现错误][Vue.js _ Swiper.js _ iOS _ 11]

来源：https://segmentfault.com/a/1190000016334023

[http_idangero.us_swiper_get...]: http://idangero.us/swiper/get-started/
[Vue.js _ Swiper.js _ iOS _ 11]: https://note.52admin.net/2018/09/10/Vue-js-%E4%BD%BF%E7%94%A8-Swiper-js-%E5%9C%A8-iOS%E5%B0%8F%E4%BA%8E11-%E6%97%B6%E5%87%BA%E7%8E%B0%E9%94%99%E8%AF%AF/