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"
]
}
52admin's Blog
52admin's Blog
901 声望
27 粉丝
推荐阅读
HTML 转 PDF 图文报表实践
导出 PDF 图文报表实践 方法一: jsPDF 使用 jsPDF 时,需要注意的是其默认单位为 mm,需要在 new jsPDF() 时传入配置 {代码...} 这个方法废了。这个鬼东西多行文本和多个图片,简直要人命! 方法二: wkhtmltopd...
52admln赞 15阅读 5.7k
Vue中的diff算法
diff算法是一种通过同层的树节点进行比较的高效算法,避免了对树进行逐层搜索遍历,所以时间复杂度只有 O(n)。diff算法的在很多场景下都有应用,例如在 vue 虚拟 dom 渲染成真实 dom 的新旧 VNode 节点比较更新时...
款冬赞 27阅读 13.3k评论 7
给我实现一个前端的 Excel 导入和导出功能
前言【负责人 A】:现在报表部分基于接口的 Excel 的导入和导出功能有点慢,前端这边能不能实现一下这个功能,然后我们在比对看看效果!【切图仔 B】: 接口这边不能优化一下吗?比如排查下慢的原因什么的。【负...
熊的猫赞 19阅读 2.5k
vue中style scope深度访问新方式(:deep())
1、>>>如果vue的style使用的是css,那么则 {代码...} 但是像scss等预处理器却无法解析>>>,所以我们使用下面的方式.2、/deep/ {代码...} 但是有些开发者反应,在vue-cli3编译时,deep的方式会...
寒水寺一禅赞 11阅读 34.8k评论 9
一个开源vue网站博客,nuxt开源网站,前后端分离项目
开媛笔记,基于nuxt ssr首屏服务器端渲染 。用于分享、记录、交流和学习,希望可以帮助到小伙伴们。同时网站在不断更新,创造属于猿(媛)的世界 -$Bao Yalong ..Let's Go! [链接]
jigsaw赞 16阅读 8.4k评论 3
你知道前端水印功能是怎么实现的吗?
前一段时间由于项目需要实现水印功能,于是去了解了相关的内容后,基于 Vue 的实现了一个 v-watermark 指令完成了对应的功能,其实整体内容并不复杂!
熊的猫赞 14阅读 1.6k
2022 你还不会微前端吗 (上) — 从巨石应用到微应用
微前端系列分为 上/下 两篇,本文为 上篇 主要还是了解微前端的由来、概念、作用等,以及基于已有的微前端框架进行实践,并了解微前端的核心功能所在,而在下篇 2022 你还不会微前端吗 (下) — 揭秘微前端核心原理...
熊的猫赞 14阅读 1.6k
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。