如何让VUE项目兼容IE浏览器?

158 阅读3分钟

可能近几年入坑的前端佬,没怎么领略过当年IE浏览器的yin威。话说当年IE浏览器份额,曾高达占90%以上。

那个时候的前端面试题,都是以IE兼容的为题为主,而且各种CSS hack技术用到懵(如下写法,谁还曾记得?o(╥﹏╥)o)。

image.png

特别!特别!特别!咱们这边,很多!很多!很多!的ZF项目,尤其喜欢IE浏览器简单介绍IE8,那就是一句话:谷歌折磨不了的前端佬,我来折磨,谷歌折磨了的前端佬我更要折磨

bc3366e81c97240ba9cbdfe2b5c4c940be2e781b.jpg

然后,在微软宣布不再支持IE维护和绑定时,碰到这么一个面试题:如何让一个VUE3项目,去兼容IE8?

要知道当时第一反应是懵逼的...

这里暂停下,喜欢思考的前端佬们,可以同步想想想想怎么解决。

------

------

a0.jpg

------

------

哥们直接划过来了吧!😏😏

没关系!来check check当时回答咋样。

1、😈😈顾左右而言他😈😈

短暂的懵逼后,我是先从项目角度来回答的。

就先说,IE8浏览器迟早是一个要被淘汰的浏览器,然后说了以下几点:

  • IE浏览器BUG多,启动慢,整体用户体验不好;
  • 微软不再支持和维护,容易造成内存泄漏,项目安全性无法保证;
  • 非标准方案太多,开发周期会长,成本也大;
  • 不支持HTML5、CSS3、Javascript三大件的新标准协议,得不到长期发展;

用来佐证自己观点,然后,就直接说,建议项目不支持IE8浏览器。

然后,面试官甩了个表情,给我体会。

image.png

2、😈😈单刀直入型😈😈

看到这种表情,除了想T一脚过去,,随即改口,说如果甲方项目,必须支持IE浏览器。

那么从技术上去解决兼容。VUE3之所以不支持IE8等低版本浏览器,是因为有对应的JS API不被支持。比如Proxy、Promise,都是ES6后出来的特性。

这样,我们就需要使用IE8中的一些方案,手动实现Promise和Proxy,比如数据劫持的Proxy,就可能需要定时器去实现一个Loop,自动对象属性值变化的set和get。

同时,还提出了babel去做兼容,大概说了下如下一个配置思路:

presets: [['@babel/preset-env', {targets: {browsers: ['last 2 versions', 'ie >= 7']}}]]

随后,面试官发了一个长长的:嗯......................

image.png

3、🔥🔥终极爆炸解决方案🔥🔥

当然,第2种,基本都是理论上来说,当时甚至到现在,我都不知道是否真能解决这种问题。

然后,当时也突然这么灵光一闪,随后说着,

VUE的技术框架,支持后端渲染的啊。

用这个,CSS中需要注意,兼容IE6浏览器都不在话下!!!!

面试官当时表情突然转变。。。。。

image.png

心里美滋滋。

而且,前端佬都是知道的,后端佬工作基本就是写接口,工作量不饱和不说,他们也腻了。这下跟前端,一起搞搞渲染页面,在前端的带领下,再创辉煌,多好!!

image.png

完美!

谢谢观看!