通过脚手架快速创建的项目，使用了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. ASH裸数据dba_hist_active_sess_history的分析

    之前在一则案例<记录一则enq: TX - row lock contention的分析过程>使用过这种方法. 因为最近故障处理经常会用到这类查询进行ASH裸数据的分析,下面以m_ash0 ...

  2. abp实战-ContosoUniversity Abp版-2添加菜单与创建实体

    这里略过理论篇,但需要了解abp分层,对于小项目来说abp分层有点复杂,这里只是演示,个别地方没有完全按照ddd理论去写,后期我将会完善. 1. 创建ContosoUniversity相关功能的菜单 ...

  3. Vue-router中的history模式和hash模式

    还记得在我们从零开始搭建一个Vue-cli3.0项目时,预设置中出现过这样一条询问: 即是否选择历史模式,当时我们很坚决地选了否,那么哈希模式和历史模式究竟有什么区别,今天我们来一探究竟. 哈希模式( ...

  4. JavaWeb之servlet（1）

    servlet servlet:就是一个Java程序,运行在web服务器中,用于接收和响应客户端的http请求.更多是配合动态资源使用.当然静态资源也要使用servlet,只不过Tomcat里面已经定 ...

  5. webpack代码分离CommonsChunkPlugin插件的使用（防止重复）

    1.webpack.config.js中添加: const path = require('path'); + const webpack = require('webpack'); const HT ...

  6. 【React Native】日常踩坑记录_以后将持续更新

    作为一名有理想.有抱负的一代iOS程序员,本着“我头发够多,还能学”的原则,我选择了追随那些大佬的脚步,于2018年开始了React Native. 第一步:找文档.准备安装开发环境: 第二步:一步步 ...

  7. 【原创】CentOS 7 安装解压版mysql5.7

    1.将mysql压缩包解压至 /usr/local 文件夹下,将其改名为mysql #解压 tar -zxf mysql-5.7.27-el7-x86_64.tar.gz -C /usr/local/ ...

  8. Linux—主机扫描工具（Nmap）

    Nmap包含五项基本功能: 主机探测 (Host Discovery) 端口扫描 (Port Scanning) 版本检测 (Version Detection) 操作系统侦测 (Operating ...

  9. 无依赖单文件http-ftp文件服务器(py2)

    网上看到的东东,居然在很合适堡垒机上传下载文件的场景. 这个只能在python2版本上跑, 我更改了自定义端口. 下次再改写个py3版本的. #!/usr/bin/env python "& ...

  10. 往对象数组里面添加相同的key 不同的value 和删除相同的key值

    应用场景:后盾字段没有发给你  自己补充数据 <div v-for="item in list" :key="item.id"> <p> ...