Vue CLI项目在IE中的兼容问题

1,166 阅读1分钟

第三方库中有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)形式导致。