解决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 相关文章推荐
javascript 操作select下拉列表框的一点小经验
Mar 20 Javascript
基于jquery的拖动布局插件
Nov 25 Javascript
js中的数组Array定义与sort方法使用示例
Aug 29 Javascript
js函数内变量的作用域分析
Jan 12 Javascript
JS实现的简单鼠标跟随DiV层效果完整实例
Oct 31 Javascript
JavaScript实现带缓冲效果的随屏滚动漂浮广告代码
Nov 06 Javascript
jQuery Ajax 异步加载显示等待效果代码分享
Aug 01 Javascript
最后说说Vue2 SSR 的 Cookies 问题
May 25 Javascript
vue3.0 CLI - 1 - npm 安装与初始化的入门教程
Sep 14 Javascript
element-ui table组件如何使用render属性的实现
Nov 04 Javascript
javascript设计模式 ? 组合模式原理与应用实例分析
Apr 14 Javascript
Threejs实现滴滴官网首页地球动画功能
Jul 13 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
JAVA/JSP学习系列之四
2006/10/09 PHP
探讨:如何编写PHP扩展
2013/06/13 PHP
discuz加密解密函数使用方法和中文注释
2014/01/21 PHP
php开发微信支付获取用户地址
2015/10/04 PHP
php获取汉字拼音首字母的方法
2015/10/21 PHP
PHP采用超长(超大)数字运算防止数字以科学计数法显示的方法
2016/04/01 PHP
JavaScript与C# Windows应用程序交互方法
2007/06/29 Javascript
项目中常用的JS方法整理
2015/01/30 Javascript
jQuery EasyUI 菜单与按钮之创建简单的菜单和链接按钮
2015/11/18 Javascript
JavaScript+html5 canvas制作色彩斑斓的正方形效果
2016/01/27 Javascript
深入了解JavaScript的逻辑运算符(与、或)
2016/12/20 Javascript
Bootstrap导航中表单简单实现代码
2017/03/06 Javascript
vuejs事件中心管理组件间的通信详解
2017/08/09 Javascript
jQuery AJAX应用实例总结
2020/05/19 jQuery
[02:40]DOTA2英雄基础教程 炼金术士
2013/12/23 DOTA
[03:17]DOTA2-DPC中国联赛1月29日Recap集锦
2021/03/11 DOTA
初学python数组的处理代码
2011/01/04 Python
python使用socket进行简单网络连接的方法
2015/04/29 Python
python实现井字棋游戏
2020/03/30 Python
Python循环语句中else的用法总结
2016/09/11 Python
Python实现八皇后问题示例代码
2018/12/09 Python
django+echart数据动态显示的例子
2019/08/12 Python
Python 基于wxpy库实现微信添加好友功能(简洁)
2019/11/29 Python
Python 跨.py文件调用自定义函数说明
2020/06/01 Python
Python函数的迭代器与生成器的示例代码
2020/06/18 Python
HTML5 客户端数据库简易使用:IndexedDB
2019/12/19 HTML / CSS
Lovedrobe官网:英国领先的大码服装品牌
2019/09/19 全球购物
澳大利亚在线购买葡萄酒:The Wine Collective
2020/02/20 全球购物
母亲80寿诞答谢词
2014/01/16 职场文书
护士长竞聘演讲稿
2014/04/30 职场文书
超市优秀员工获奖感言
2014/08/15 职场文书
公司周年庆活动方案
2014/08/25 职场文书
活动总结范文
2014/08/30 职场文书
在vue中import()语法不能传入变量的问题及解决
2022/04/01 Vue.js
JS中forEach()、map()、every()、some()和filter()的用法
2022/05/11 Javascript
CentOS7 minimal 最小化安装网络设置过程
2022/12/24 Servers