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

前言

在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...

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

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

转载于:https://www.cnblogs.com/qixidi/p/10143681.html

Vue.js 使用 Swiper.js 在 iOS 11 时出现错误相关推荐

Vue.js 使用 Swiper.js 在 iOS 11 时出现错误
前言在H5项目中,需要用到翻页效果,通过 Swiper 来实现,安装 Swiper npm i swiper -S 但是实际使用中,发现低版本 iOS < 11 会出现下面这个错误: Synt ...
swiper怎么在HTML引入JS文件,Swiper.js插件超简单实现轮播图
Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端.能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果.超好用话不多说,直接上教程 1.首先加载插件,需要用到 ...
smartSVN 分支合并到主干上，iOS 编译时链接错误
项目中需要将分支与主干进行合并,通常都是将分支合并到主干上,但是这次是将主干上的内容合并到分支上.查询到以下博文,不知为何,该博文被封了,只好用快照复制下来,方便以后查阅. 1.创建分支的意义创建分 ...
vue中引入swiper(4.0+)，打包出错（ ERROR in static/js/4.bafdba9a08bd02fd1c37.js from UglifyJs Unexpected toke）
vue打包报错: ERROR in static/js/4.bafdba9a08bd02fd1c37.js from UglifyJs Unexpected token: name (Dom7) [. ...
【笔记-vue】《imooc-vue.js高仿饿了么》、《imooc-vue 音乐app》、《imooc-vue.js源码全方位解析》
20170709 - 20171128:<imooc-vue.js高仿饿了么> 一.第一章课程简介 1-1课程简介 1.需求分析-脚手架工具-数据mock-架构设计-代码编写-自测-编译 ...
vue中config/index.js:配置的详细理解
当我们需要和后台分离部署的时候,必须配置config/index.js: 用vue-cli 自动构建的目录里面 (环境变量及其基本变量的配置) 1 2 3 4 5 6 7 8 9 10 11 12 ...
pc端html轮播带滑块,swiper.js简单快速实现轮播滑动（兼容PC端、移动端）
swiper是一款免费以及轻量级轮播滑动的js框架,适用于PC端跟移动端,官方地址:(https://www.swiper.com.cn/) 效果演示: PC端移动端(在浏览器将设备切换为手机,这里 ...
MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录...
注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...
vue中使用raphael.js实现地图绘制
一.效果图二.在vue中引入raphael.js npm i raphael -S 三.封装一个名为StreetMap的组件,代码如下 1 <template> 2 <div> ...

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

前言

原因

解决方案

Vue.js 使用 Swiper.js 在 iOS 11 时出现错误相关推荐

最新文章

热门文章