通过脚手架快速创建的项目,使用了swiper组件,项目中使用了es6语法,使用了babel-polyfill转化依旧不行,仔细排查项目中的使用组件,最后找到问题所在

swiper4.5.0版本太高,不支持IE11 转化报错了,报错如下

查阅网上资料,并没有这个解决的方案,于是每一项逐项排查,起初用到vue中路由懒加载resolve使用,以及封装了请求接口api.js中的箭头函数使用,于是我一项项去解决,修改项目的整体结构,从main.js中修改引入的一些组件和插件,最后我找到了使用的swiper版本过高,更换为swiper3.4.0版本就可以兼容项目,完美实现兼容,这里提醒大家注意swiper使用4.x和3.x的用法区别,尤其是自动播放属性autoplay的修改,更多的请去看swiper的api。

二,解决打包样式不兼容问题

在开发坏境中,我们的使用了less起编写我们的样式,因为使用颜色函数,以及使用的组件化样式,而打包后我们兼容性写法不生效了,没有这个代码,那么需要我们修改一下配置

webpack.prod.config.js中去掉 (55行)

// new OptimizeCSSPlugin({
// cssProcessorOptions: config.build.productionSourceMap
// ? { safe: true, map: { inline: false } }
// : { safe: true }
// }),

在utils.js中加入28行后面加入下面这一句,只要前面的逗号

minimize:true

重新打包就可以解决问题

vue中使用的一些问题(IE不兼容,打包样式不生效)的更多相关文章

  1. 黑马vue---16、vue中通过属性绑定为元素设置class类样式

    黑马vue---16.vue中通过属性绑定为元素设置class类样式 一.总结 一句话总结: 这里就是为元素绑定class样式,和后面的style样式区别一下 vue中class样式绑定方式的相对于原 ...

  2. vue中,svg图标添加click事件,部分浏览器不生效

    vue项目中,使用svg图标,但是发现,为svg图标绑定click事件时,部分浏览器会出现,点击没有反应的情况,代码如下: <icon name="icon_add" @cl ...

  3. 第二章 Vue快速入门-- 15 vue中通过属性绑定为元素设置class类样式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  4. VUE中使用canvas做签名功能,兼容IE

    <template>         <div>           <div class="msgInput">             &l ...

  5. vue中路由按需加载的几种方式

    使用vue-cli构建项目后,我们会在Router文件夹下面的index.js里面引入相关的路由组件,如: import Hello from '@/components/Hello' import ...

  6. vue中如何不通过路由直接获取url中的参数

    前言:为什么要不通过路由直接获取url中的参数? vue中使用路由的方式设置url参数,但是这种方式必须要在路径中附带参数,而且这个参数是需要在vue的路由中提前设置好的. 相对来说,在某些情况下直接 ...

  7. vue中的重要特性

    一.vue中的自定义组件 html的代码: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  8. Vue中comoputed中的数据绑定

    Vue中的数据实现响应式绑定是在初始化的时候利用definePrototype的定义set和get过滤器,在进行组件模板编译时实现water的监听搜集依赖项,当数据发生变化时在set中通过调用dep. ...

  9. vue中使用stompjs实现mqtt消息推送通知

    最近在研究vue+webAPI进行前后端分离,在一些如前端定时循环请求后台接口判断状态等应用场景用使用mqtt进行主动的消息推送能够很大程度的减小服务端接口的压力,提高系统的效率,而且可以利用mqtt ...

随机推荐

  1. Z从壹开始前后端分离【 .NET Core2.0/3.0 +Vue2.0 】框架之三 || Swagger的使用 3.1

    本文梯子 本文3.0版本文章 常见问题 1.Bug调试 2.经常有小伙伴遇到这个错误 3.路由重载 一.为什么使用Swagger 二.配置Swagger服务 1.引用Nuget包 2.配置服务 3.启 ...

  2. 帝国CMS标签【操作类型】说明详解

    看标签的参数时候,一般最后一个参数是操作类型说明,可是后面写的是:"操作类型说明 具体看操作类型说明", 这个操作类型说明在什么地方看啊 操作类型 说明 操作类型 说明 0 各栏目 ...

  3. 这些好用却鲜为人知的Python库,你知道多少?

    前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者: 读芯术 PS:如有需要Python学习资料的小伙伴可以加点击下方链 ...

  4. SSM定时任务(spring3.0)

    SSM定时任务主要分为两部分 1.applicationContext.xml配置文件设置 设置如下: 在xmlns中添加:xmlns:task="http://www.springfram ...

  5. XSS攻击(跨站脚本攻击)

    一.什么是XSS?怎么发生的? XSS(Cross site scripting)全称为跨站脚本攻击,是web程序中最常见的漏洞.指攻击者在网页中嵌入客户端脚本(例如Javascript),当用户浏览 ...

  6. linux下 sort | uniq | wc | less 几个命令的基本用法

    sort -f :忽略大小写的差异,例如 A 与 a 视为编码相同: -b :忽略最前面的空格符部分: -M :以月份的名字来排序,例如 JAN, DEC 等等的排序方法: -n :使用『纯数字』进行 ...

  7. Python—文件读写操作

    初识文件操作 使用open()函数打开一个文件,获取到文件句柄,然后通过文件句柄就可以进行各种各样的操作了,根据打开文件的方式不同能够执行的操作也会有相应的差异. 打开文件的方式: r, w, a, ...

  8. Ubuntu18.04 安装TensorFlow 和 Keras

    TensorFlow和Keras是当前两款主流的深度学习框架,Keras被采纳为TensorFlow的高级API,平时做深度学习任务,可以使用Keras作为深度学习框架,并用TensorFlow作为后 ...

  9. 组装数据- 对象里面是key:value, value里面是数组的形式,如 {key:[aa,bb], key:[cc,dd]}

    组合后 对象里面是key:value,value里面是数组的形式{key:[aa,bb], key:[cc,dd]} var chinaGeoCoordMap = { '无锡市': [121.4648 ...

  10. 初学JavaScript正则表达式(十一)

    JavaScript的对象属性 整理自慕课网教学 点此进入