解决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 相关文章推荐
JQuery扩展插件Validate 5添加自定义验证方法
Sep 05 Javascript
jQuery Ajax请求状态管理器打包
May 03 Javascript
jquery获取自定义属性(attr和prop)实例介绍
Apr 21 Javascript
jquery组件使用中遇到的问题整理及解决
Feb 21 Javascript
JavaScript设置body高度为浏览器高度的方法
Feb 09 Javascript
jQuery事件绑定与解除绑定实现方法
Apr 15 Javascript
javascript中createElement的两种创建方式
May 14 Javascript
js数组去重的5种算法实现
Nov 04 Javascript
jQuery 1.9.1源码分析系列(十五)动画处理之缓动动画核心Tween
Dec 03 Javascript
微信小程序 判断手机号的实现代码
Apr 19 Javascript
vue router动态路由下让每个子路由都是独立组件的解决方案
Apr 24 Javascript
vue项目中自定义video视频控制条的实现代码
Apr 26 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读取3389的脚本
2014/05/06 PHP
php使用Cookie控制访问授权的方法
2015/01/21 PHP
php实现的IMEI限制的短信验证码发送类
2015/05/05 PHP
php ci 获取表单中多个同名input元素值的代码
2016/03/25 PHP
laravel框架中表单请求类型和CSRF防护实例分析
2019/11/23 PHP
php设计模式之享元模式分析【星际争霸游戏案例】
2020/03/23 PHP
javascript的键盘控制事件说明
2008/04/15 Javascript
点弹代码 点击页面任何位置都可以弹出页面效果代码
2012/09/17 Javascript
Javascript图像处理—为矩阵添加常用方法
2012/12/27 Javascript
jQuery+slidereveal实现的面板滑动侧边展出效果
2015/03/14 Javascript
基于canvas实现的钟摆效果完整实例
2016/01/26 Javascript
javascript截图 jQuery插件imgAreaSelect使用详解
2016/05/04 Javascript
js字符串截取函数slice、substring和substr的比较
2016/05/17 Javascript
AngularJS自定义插件实现网站用户引导功能示例
2016/11/07 Javascript
微信小程序实现移动端滑动分页效果(ajax)
2017/06/13 Javascript
React + webpack 环境配置的方法步骤
2017/09/07 Javascript
如何使用less实现随机下雪动画详解
2019/01/02 Javascript
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
2019/05/04 jQuery
JavaScript之数组扁平化详解
2019/06/03 Javascript
简谈创建React Component的几种方式
2019/06/15 Javascript
微信小程序进入广告实现代码实例
2019/09/19 Javascript
解决vue-cli 打包后自定义动画未执行的问题
2019/11/12 Javascript
一个月入门Python爬虫学习,轻松爬取大规模数据
2018/01/03 Python
使用 tf.nn.dynamic_rnn 展开时间维度方式
2020/01/21 Python
tensorflow 实现打印pb模型的所有节点
2020/01/23 Python
python图片剪裁代码(图片按四个点坐标剪裁)
2020/03/10 Python
css3通过scale()、rotate()实现放大、旋转
2020/03/19 HTML / CSS
RentCars.com巴西:汽车租赁网站
2016/08/22 全球购物
美国著名的品牌折扣店:Burlington
2017/06/08 全球购物
银行金融服务方案
2014/06/11 职场文书
大学生助学金感谢信
2015/01/21 职场文书
大班下学期个人总结
2015/02/13 职场文书
销售人员管理制度
2015/08/06 职场文书
2016幼儿园毕业感言
2015/12/08 职场文书
高一英语教学反思
2016/03/03 职场文书
原生CSS实现文字无限轮播的通用方法
2021/03/30 HTML / CSS