前端项目兼容IE11

语法兼容问题

1.脚手架项目

npm i babel-polyfill
import 'babel-polyfill'

2.纯静态HTML文件

（1）方案一 gulp构建：

1.ES6转ES5：安装gulp-babel插件
2.代码填充或兼容性补丁（Polyfill）：引入browser-polyfill.min.js
将新的 API ，比如 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局对象，以及一些定义在全局对象上的方法（比如 Object.assign）进行转码。
好处：可进行代码压缩混淆打包，使用less,scss等
gulp中文文档

（2）方案二 引入js：

// 1 代码填充
<script type="text/javascript" src="./babel/browser-polyfill.min.js"></script>

// 2 语法转换
<script type="text/javascript" src="./babel/browser.min.js"></script>
// a.外部引入
<script type="text/babel" src="your_ES6file.js"></script> 
// 注意：引入的your_ES6file.js过大会报错  as it exceeds the max of "100KB"   
// 解决：将browser.min.js源代码compact设置为false，
// 检索 compact:{type:"booleanString","default":"auto",description:"do not include superfluous whitespace characters and line terminators [true|false|auto]"}  将默认值修改为false，"default":"false"
// b.标签内
<script type="text/babel">
	// 使用ES6语法
</script>

其他

1. IE11不支持Array.find()

// 需要在Array原型链上添加find
if (!Array.prototype.find) {
  Array.prototype.find = function(callback) {
    return callback && (this.filter(callback) || [])[0];
  };
}

2. IE11 el-menu鼠标滑过报错：Error in v-on handler: “TypeError: 对象不支持此操作”

// 引入以下js
(function(window) {
    try {
        new MouseEvent('test');
        return false; // No need to polyfill
    } catch (e) {
        // Need to polyfill - fall through
    }
    // Polyfills DOM4 MouseEvent
    var MouseEvent = function(eventType, params) {
        params = params || { bubbles: false, cancelable: false };
        var mouseEvent = document.createEvent('MouseEvent');
        mouseEvent.initMouseEvent(
          eventType, params.bubbles, params.cancelable, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null
        );
        return mouseEvent;
    };
    MouseEvent.prototype = Event.prototype;
    window.MouseEvent = MouseEvent;
}(window));