具体方案
首选polyfill,所以首先引入babel,有三种引入方案(www.jiangruitao.com/babel/babel… 。
配置完,后续你引入别的组件他可能无效或者失效,一是降低引入组件的版本,二是结合下shim,缺少啥引入啥。
比如,我使用了exceljs。他的4.3.0不行我给它降低成3.9.0;然后他还提示没有promise的finally,我就引入了promise.prototype.finally。(这个我只会这个方法,在npm搜promise shim 就能搜到对应的shim。
(晕菜,这就是我的蹩脚方案)
我听说ie已经退出历史舞台了呀,为什么还要兼容ie?
因为现在还有那么些必须使用activeX的不可替代的工具。比如开专票插件,比如银行插件。
而且它并没有真的退出历史舞台,微软不维护ie11了,但edge中加入了ie的内核,它还会以另一种形式长期存在。
那具体有什么注意点呢,先简单说说?
首先,明确vue无需进行兼容处理的版本,还有兼容的极限版本,
因为vue中用到了es5的Object.definedProperty来处理data中对象的所有属性,而Object.definedProperty无法shim,所以vue最多兼容到es5,不兼容es5的浏览器,都无法vue都无法兼容,比如ie8
浏览器的兼容请参阅:caniuse.com/?search=es6 ES5:kangax.github.io/compat-tabl… ES6:kangax.github.io/compat-tabl…)
1.chrome:51版起,可支持97%的ES6新特性
2.firefox:53版起,可支持97%的ES6新特性
3.safari:10版起,可支持99%的ES6新特性
4.ie:Edge 15可支持96%的ES6新特性。Edge14可支持93%。(IE7~11基本不支持ES6)
(其实chrome和firefox现在最新都已经99版本了,一般让用户升级浏览器问题应该不大,大概,主要还是ie的兼容,safari不在我考虑范围哈,我的用户目前不用这浏览器。)
其次,每次安装新的插件,记得把ie三个版本都测试过去,确保都能正常使用,特别是插件没有明确标注支持的ie版本时。
最后,不要手贱去更新插件。
还有具体细节呢,稍微展开说说?
兼容ES6的解决方法:
把ES6转换为ES5,
使用的方法有shim与polyfill
(区别:juejin.cn/post/684490… )
(shim就是一把梭把方法都重写,polyfill是按需加载,我觉得还是polyfill好吧)
比较通用的工具有babel、jsx、traceur、es6-shim、es6-promise等
ie9的兼容
1、如果错误的发布了含有console.log的代码,你会发现你打开f12开发工具能顺利运行,但关闭f12它就运行不下去
2、他没有promise.prototype.finally,没有let,const,proxy等
注意你使用的插件的版本,如果可以兼容请不要随意地去更新,去执行什么 vue audit fix
比如以下几个插件,这边标注版本是可用的:
"axios": "^0.19.2"
"xlsx": "^0.15.5"
"vue-print-nb": "^1.5.0",
(我手贱,执行了那啥audit着实给我坑了一把,急忙给他回退掉,npm install -save axios@0.19.2)