第三方库中有IE不兼容的语法
最近在开发的一个Vue项目,要求兼容IE11,但是打开项目无法显示。控制台提示语法错误,根据其链接到的代码定位到了是一个自己开发的npm包的问题,这个包是一个关于fetch请求的公共组件库。
解决无法显示问题
在项目中的vue.config.js中添加transpileDependencies属性
module.exports={
transpileDependencies: ['报错模块名字'],
}
解决fetch兼容问题
yarn add whatwg-fetch -S
// 在main.js顶部引入它
import 'whatwg-fetch';
部分svg无法显示
目前项目中所有的图都是svg格式,比如头像此类复杂的也是,在IE11中无法显示的也是这类头像。经过一系列的排查,定位到问题,可能是因为svg的2种loader,会预加载icon文件夹,精简svg中的一些信息,导致此类头像在IE中无法显示。
解决办法:此类头像不采用svg组件,使用img标签引入即可。不过,重要一点,通过img标签引入的svg不能存放在之前的icon文件夹中,因为svg loader会对icon文件夹一顿操作。
部分时间显示问题
IE不支持+new Date(time)这种入参形式,可采用moment(time)
获取dom颜色问题
项目中的一个功能是自己实现输入框的placeholder,在IE中输入框聚焦时,placeholder文本依然存在。原因是获取文本dom颜色在Chrome中是#999999,在IE中变成了rgb(255,255,255)形式导致。