解决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 相关文章推荐
短信提示使用 特效
Jan 19 Javascript
Javascript 阻止javascript事件冒泡,获取控件ID值
Jun 27 Javascript
Array.prototype 的泛型应用分析
Apr 30 Javascript
jquery ready(fn)事件使用介绍
Aug 21 Javascript
变量声明时命名与变量作为对象属性时命名的区别解析
Dec 06 Javascript
JavaScript声明变量时为什么要加var关键字
Sep 29 Javascript
javascript中的altKey 和 Event属性大全
Nov 06 Javascript
jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
Aug 20 Javascript
ionic+AngularJs实现获取验证码倒计时按钮
Apr 22 Javascript
Vue的MVVM实现方法
Aug 16 Javascript
详解Vue项目编译后部署在非网站根目录的解决方案
Apr 26 Javascript
vue单页应用在页面刷新时保留状态数据的方法
Sep 21 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往windows中添加用户
2006/12/06 PHP
解析:使用php mongodb扩展时 需要注意的事项
2013/06/18 PHP
PHP封装的验证码工具类定义与用法示例
2018/08/22 PHP
JavaScript获取某年某月的最后一天附截图
2014/06/23 Javascript
JavaScript自定义数组排序方法
2015/02/12 Javascript
jQuery蓝色风格滑动导航栏代码分享
2015/08/19 Javascript
jquery实现未经美化的简洁TAB菜单效果
2015/08/28 Javascript
JavaScript程序中的流程控制语句用法总结
2016/05/23 Javascript
js 连续赋值的简单实现
2016/06/13 Javascript
Bootstrap笔记之缩略图、警告框实例详解
2017/03/09 Javascript
解决vue attr取不到属性值的问题
2018/09/18 Javascript
Vue组件之单向数据流的解决方法
2018/11/10 Javascript
vue实现路由切换改变title功能
2019/05/28 Javascript
layer实现登录弹框,登录成功后关闭弹框并调用父窗口的例子
2019/09/11 Javascript
vue实现计算器功能
2020/02/22 Javascript
完美解决vue 中多个echarts图表自适应的问题
2020/07/19 Javascript
JavaScript中条件语句的优化技巧总结
2020/12/04 Javascript
[03:37]2014DOTA2国际邀请赛 主赛事第一日胜者组TOPPLAY
2014/07/19 DOTA
[02:00]DAC2018主宣传片——龙征四海,剑问东方
2018/03/20 DOTA
[46:37]LGD vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python实现删除文件但保留指定文件
2015/06/21 Python
通过Python 接口使用OpenCV的方法
2018/04/02 Python
Python基于百度AI的文字识别的示例
2018/04/21 Python
django的ORM模型的实现原理
2019/03/04 Python
python爬虫豆瓣网的模拟登录实现
2019/08/21 Python
Django stark组件使用及原理详解
2019/08/22 Python
L*SPACE官网:比基尼、泳装和度假服装
2019/03/18 全球购物
销售主管的自我评价分享
2014/01/03 职场文书
2014年向国旗敬礼活动方案
2014/09/27 职场文书
2014教师专业技术工作总结
2014/12/03 职场文书
新教师个人工作总结
2015/02/06 职场文书
公司业务员管理制度
2015/08/05 职场文书
pytorch加载预训练模型与自己模型不匹配的解决方案
2021/05/13 Python
SSM VUE Axios详解
2021/10/05 Vue.js
Python中的turtle画箭头,矩形,五角星
2022/03/16 Python
Python尝试实现蒙特卡罗模拟期权定价
2022/04/21 Python