解决Vue+Element ui开发中碰到的IE问题


Posted in Javascript onSeptember 03, 2018

IE9样式错乱,IE11无法正常加载v-loading等问题

引入了babel-polyfill插件,依然出现”polyfill-eventsource added missing EventSource to window”的奇怪问题(ie所有版本都有出现)

第一步:安装babel-ployfill (已安装请跳过此步骤)

yarn add babel-ployfill

修改webpack打包配置文件:webpack.bash.conf.js

// 引入babel-ployfill
 var babelPloyfill = require('babel-ployfill')

 // ...
 // 修改entry字段
 entry: {
 // app: './src/main.js'
 app: ["babel-polyfill", "./src/main.js"]
 },

重新运行,v-loading等问题完美解决, 原因可能是v-loading是调用的ES6的Object的setter和getter方法来实现的,babel-ployfill报错,未能将ES6的方法完全转换为IE9支持的ES5方法

IE9样式错乱

可能的原因1,element-ui 中使用了 display: flex; 样式,IE9不支持次样式,解决方法为,排查下各组件,避免使用带 display: flex; 的组件

可能的原因2,IE9浏览器过于老旧,单文件最大行数超过一定限制将不再读取后边的内容,因此可以尝试分割css文件和打包的js文件

分割js文件,最好的方法是采用vue的路由懒加载,这样打包时,vue-loader会把每个路由对应的js文件打包在一起。同时注意组件的合理划分,避免单组件体积过大,并提高组件的复用性

分割css文件,通过yarn add css-split-webpack-plugin -D安装css-split-webpack-plugin包来分割组件,修改

webpack.prod.conf.js文件

// 引入依赖
 var CSSSplitWebpackPlugin = require('css-split-webpack-plugin').default

 // 在css打包插件后面新增css分割插件
 new ExtractTextPlugin({
 filename: utils.assetsPath('css/[name].[contenthash].css')
 }),
 // 新增的css分割插件
 new CSSSplitWebpackPlugin({
 size: 4000,
 filename: utils.assetsPath('css/[name]-[part].[ext]')
 }),

以上,写bug我最擅长了,找问题就不是我擅长的了@_@!。虽然问题解决了,但是可能分析的不对,希望大神拍砖指导,也希望对新手小白有一些帮助。

这篇解决Vue+Element ui开发中碰到的IE问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Discuz! 6.1_jQuery兼容问题
Sep 23 Javascript
仿谷歌主页js动画效果实现代码
Jul 14 Javascript
js 单击式的下拉菜单效果实例
Aug 13 Javascript
$.each遍历对象、数组的属性值并进行处理
Jul 18 Javascript
JavaScript实现查找字符串中第一个不重复的字符
Dec 29 Javascript
JavaScript中string对象
Jun 12 Javascript
详解Document.Cookie
Dec 25 Javascript
JS验证码实现代码
Sep 14 Javascript
vue中实现在外部调用methods的方法(推荐)
Feb 08 Javascript
webpack的CSS加载器的使用
Sep 11 Javascript
解决VUEX的mapState/...mapState等取值问题
Jul 24 Javascript
javascript中Set、Map、WeakSet、WeakMap区别
Dec 24 Javascript
webpack4 处理SCSS的方法示例
Sep 03 #Javascript
解决vue打包css文件中背景图片的路径问题
Sep 03 #Javascript
解决Vue2.0中使用less给元素添加背景图片出现的问题
Sep 03 #Javascript
vue组件(全局,局部,动态加载组件)
Sep 02 #Javascript
详解jQuery中的easyui
Sep 02 #jQuery
vue-cli脚手架的安装教程图解
Sep 02 #Javascript
vue-router 实现导航守卫(路由卫士)的实例代码
Sep 02 #Javascript
You might like
PHP文件操作详解
2016/12/30 PHP
php写一个函数,实现扫描并打印出自定目录下(含子目录)所有jpg文件名
2017/05/26 PHP
JQuery1.6 使用方法三
2011/11/23 Javascript
Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例
2014/02/12 Javascript
js变量提升深入理解
2016/09/16 Javascript
jQuery.datatables.js插件用法及api实例详解
2016/10/28 Javascript
Angular.JS判断复选框checkbox是否选中并实时显示
2016/11/30 Javascript
JavaScript实现经典排序算法之选择排序
2016/12/28 Javascript
vue组件间通信解析
2017/03/01 Javascript
jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
2017/03/24 jQuery
Node.js使用Express创建Web项目详细教程
2017/03/31 Javascript
JS伪继承prototype实现方法示例
2018/06/20 Javascript
layui监听单元格编辑前后交互的例子
2019/09/16 Javascript
Layui数据表格 前后端json数据接收的方法
2019/09/19 Javascript
vue实现循环滚动列表
2020/06/30 Javascript
python 正则式使用心得
2009/05/07 Python
python 图片验证码代码分享
2012/07/04 Python
零基础写python爬虫之爬虫的定义及URL构成
2014/11/04 Python
两个使用Python脚本操作文件的小示例分享
2015/08/27 Python
Python时间的精准正则匹配方法分析
2017/08/17 Python
Python实现使用卷积提取图片轮廓功能示例
2018/05/12 Python
Flask框架Flask-Principal基本用法实例分析
2018/07/23 Python
python 把列表转化为字符串的方法
2018/10/23 Python
Python中正则表达式对单个字符,多个字符和匹配边界等使用
2021/01/27 Python
HTML5中的autofocus(自动聚焦)属性介绍
2014/04/23 HTML / CSS
澳大利亚相机之家:Camera House
2017/11/30 全球购物
Spartoo瑞典:鞋子、包包和衣服
2018/09/15 全球购物
德国消费电子产品购物网站:Guter Kauf
2020/09/15 全球购物
绿色出行口号
2014/06/18 职场文书
学习考察心得体会
2014/09/04 职场文书
2014年平安建设工作总结
2014/11/19 职场文书
2015军训通讯稿大全
2015/07/18 职场文书
领导干部学习三严三实心得体会
2016/01/05 职场文书
教你做个可爱的css滑动导航条
2021/06/15 HTML / CSS
日本十大血腥动漫,那些被禁播的动漫盘点
2022/03/21 日漫
MySQL数据库如何查看表占用空间大小
2022/06/10 MySQL