vue 整理的关于IE的一些兼容和报错情况

因为是新手小白也是经历了一次项目实战之后才敢分享给大家，大家作为参考就可以

• 最主要的就是es6的语法兼容问题
  babel-polyfill
  Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而可以在现有环境执行，所以我们可以用ES6编写，而不用考虑环境支持的问题；

  npm install --save-dev babel-polyfill
  //main.js
  // 我们在这里引用一下
  import "babel-polyfill";
  

  但是这个只能把 es6 的一些 js 语法转化，如果使用 箭头函数的话可以再引入一个 es6-promise

  npm install --save-dev es6-promise
  // main.js
  import Es6Promise from 'es6-promise'
  Es6Promise.polyfill();
  

  到这里其实大部分情况都已经好了，大家可以运行看了。

• 因为我使用的是 Element UI ,element ui 的菜单组件在 ie 浏览器上折叠悬浮会报错，原因在于element-ui的submenu代码中多处使用了new MouseEvent(’***’)，但是ie中不支持该种操作。
  我们需要修改一下源码 ，我们找到这个路径下的文件（node_modules\element-ui\lib\element-ui.common.js ）加上一个如下polyfill。
  
  我们直接加在文件的末尾位置就好

(function (window) {
  try {
    new MouseEvent('test');
    return false; // No need to polyfill
  } catch (e) {
		// Need to polyfill - fall through
  }

    // Polyfills DOM4 MouseEvent
	var MouseEventPolyfill = function (eventType, params) {
		params = params || { bubbles: false, cancelable: false };
		var mouseEvent = document.createEvent('MouseEvent');
		mouseEvent.initMouseEvent(eventType, 
			params.bubbles,
			params.cancelable,
			window,
			0,
			params.screenX || 0,
			params.screenY || 0,
			params.clientX || 0,
			params.clientY || 0,
			params.ctrlKey || false,
			params.altKey || false,
			params.shiftKey || false,
			params.metaKey || false,
			params.button || 0,
			params.relatedTarget || null
		);

		return mouseEvent;
	}

	MouseEventPolyfill.prototype = Event.prototype;

	window.MouseEvent = MouseEventPolyfill;
})(window);

• IE 报错
  语法错误，ie 浏览器对于一些语法要求是特别严格的，可能相同的代码在别的浏览器 chrom ff 等，显示正常，这是因为这些浏览器对于这些语法没有那么严格，比如重复命名相同属性，这在 ie 上就会报错，遇见这种情况大家看一下报错信息筛选一下就可以，有的错误提示还是挺明显的
  
  比如这个报错就是说属性定义重复了，我们点一下红色提示部分找到报错位置
  
  找到文件之后我们直接看标签属性就可以
  
  找到之后删除掉就好了，其它类似报错同理，大家都可以这样看
  
  也可以找到打包之后的js查看错误关键字，上面报错显示 2.js:196:1,或是其它的 我们就找到这个，196行找到之后可以看到这是打包之后的结果，里面依稀能看到一些我们熟悉的关键字，这样找起来会很快。

• 我还遇到一个 ie 报错是因为项目中用到了 RSA 非对称信息加密，这种加密很常见，两套密钥，一个可以对信息加密一般前端用，另一个可以对前面加密的信息解密一般放在后端，这个比较简单，大家可以移步这里，正常用肯定没问题，但是如果你的项目要兼容 IE 浏览器，那就不能这么用了，官网的js会导致IE浏览器报错SCRIPT1010错误，原因为逗号(,)关键字(default,delete)等。需要处理一下，这边我会分享一个我用的，大家也不用下载踩坑了

• 当IE浏览器导出Excel是get请求，如果请求参数过长会导致请求参数获取不到报 400 的错误，有可能在chrom或者其他浏览器是正常的，ie会报错，这个时候我们可以将 get 请求换成 post 请求即可解决。

//导出
     indexImportFun(){
       let temParam = {}//请求参数
       this.$http.post("请求地址",temParam,{responseType:'blob'}).then(res => {//{responseType:'blob'} 这个很重要，约定接收参数必须是二进制对象
         // 打印出 res headers 里面有我们需要的 文件名称等等一些
         let fileName = decodeURI(res.headers['filename']);
         let fileReader = new FileReader();//新建一个文件对象
         fileReader.onload = function () {//文件读取成功后触发的事件
           let blob = new Blob([res.data], {type: 'application/vnd.ms-excel;charset=utf-8'});//新建一个 blob对象并解析 data 并规定 blob 的 type 为 excel
           if ('download' in document.createElement('a')) {//判断浏览器是否支持download属性
             //创建 a 标签并隐藏模拟点击 因为 a 标签的 href 允许跨域请求
             let eLink = document.createElement('a');
             eLink.download = fileName;
             eLink.style.display = 'none';
             eLink.href = URL.createObjectURL(blob);
             document.body.appendChild(eLink);
             eLink.click();
             URL.revokeObjectURL(eLink.href);
             // 使用完移除掉
             document.body.removeChild(eLink)
           } else {
             navigator.msSaveBlob(blob, fileName)//ie10的 msSaveBlob 方法本地保存文件
           }
         };
         fileReader.readAsText(res.data,'utf-8');
       }).catch(err => {
         this.$message.error(err)
       })
     }

• 如果使用elementUI 的table组件，在 IE 浏览器会因为宽度继承不到而压缩，我们需要手动设置一下 table 的 header 宽度和 body 宽度，还有每个 tr 包裹的 div 的宽度即可解决

/* 公共样式 */
/*---table表格样式调整---*/
.el-table__header{
 width: 100% !important;
}
.el-table__body{
 width: 100% !important;
}
.el-table__body .cell  {
 width: 100% !important;
}