Vue项目兼容IE一些处理方法

前言

这都2022年了，还要兼容ie，就离谱。。。
项目使用的依赖的兼容性问题，由于IE在市场的占有率不到1%，很多插件已经不再考虑兼容IE浏览器了。
还有一个是如何要兼容更低版本的浏览器（IE8-），那还得下载es3ify-webpack-plugin插件把es5转化成es3
现在项目的css布局基本都是使用flex布局或者grid布局了，很多在ie上很出现布局错乱甚至不显示的问题。
下面兼容的问题只针对功能性上的，css布局问题如果要兼容ie要多写好多代码，还影响后续开发的时间成本，所以我是不处理了。
处理的项目是Vue2.6版本

依赖中有es6语法

一般vue项目的babel是不会主动去识别node_modules文件的，需要手动去识别，但是识别整个node_modules文件夹又太慢了，可以在vue.config.js增加transpileDependencies配置项来指定识别相关依赖：

module.exports = {
	transpileDependencies: ['依赖名']
}

我看网上有些说transpileDependencies无效的问题，有说是没用npm下载依赖导致的，有的说可以用正则来匹配依赖名。

IE控制台报错：unhandled Pormise rejection Error: 拒绝访问

这个问题是因为Promise的异常捕获冒泡导致的，当Promise的状态变为rejection时没有正确处理，让其一直冒泡（propagation），直至被进程捕获。这个Promise就被称为unhandled promise rejection。在promise加上catch就行了

下载功能在IE下无效

这个原因是下载功能是通过获取链接然后通过dom.click()方法进行下载的，这在ie是不行的，没有通过鼠标而是通过js来实现单击效果ie认为是漏洞。判断下是不是IE浏览器，然后特殊处理：

let blob = 'xxx' // 图片blob对象
if (!!window.ActiveXObject || 'ActiveXObject' in window) {
 	 window.navigator.msSaveBlob(blob, imgText + '.png')
} else {
	let a = document.createElement('a')
	a.setAttribute('href', URL.createObjectURL(blob))
	a.clock()
}

那如果要模拟点击时间呢：

if (typeof this.onclick == 'function') {
	if (this.onclick({type: 'click'}) && this.href) {
		window.open(this.href, this.target? this.target : '_self');
	} else if (this.href) {
		window.open(this.href, this.target? this.target : '_self');
	}
}

路由不能跳转：SCRIPT1006: Expected ‘)’

定位到报错代码位置：

发现是element_ui依赖的问题，参考上面的依赖中有es6语法问题。

babel优化

使用env preset：
babel-preset-env允许你指定一个代码执行环境，并且只编译该环境缺少的特性。而非babel-pre-env预设存在的问题在于它们往往做得太多。例如，大多数现代浏览器都支持ES6生成器。如果使用babel-preset-es2015这些预设，ES6生成器函数将始终被转换为复杂的ES5代码，完全没有必要。
.babelrc 配置文件如下：

"presets": [
    [
      "env",
      {
        "targets": {
          "browsers": ["last 2 versions", "ie >= 8"]
        }
      }
    ]
  ]

参考文档：
Babel中文参考手册