技术选型

180 阅读2分钟

VUE项目是否兼容IE8+调研?

  • 先说说vue本身

    vue.js支持所有兼容ES5的浏览器

    IE 8 实现了 Object.defineProperty() 方法,但 只能在 DOM 对象上使用。

    vue将遍历此对象所有的属性, 并使用Object.defineProperty把这些属性全部转为getter/setter.

  • IE8

    在IE8下只能对DOM对象使用,如果对原生对象使用Object.defineProtry()会报错

  • 兼容方案

    网上有很多说兼容IE8的方案,大多都是安装和引用 babel-polyfill 或者@babel/polyfill

    只需要按照先安装,然后在main.js和babel.config.js

    module.exports = {
      presets: [
        ["@vue/app",{useBuiltIns: "entry"}]
      ]
    }
    

    但这些方法我都一一尝试,但是最终还是无法真正兼容,还会出现一些问题:

    例如:

    ​ 1.ie8不支持exports defaut 写法。

    ​ 2.ie8中代码末尾必须以分号结尾。

    ​ 3.不支持Array.from写法。。。等等

  • 替代方案

    1.目前前端项目大多采用MVVM方式开发,我不希望还使用最原始的操作DOM或者手动渲染模版的方式给页面赋值。

    所以排除了最原始的webpack+ jquery + artTemplate + bootstrap方案。

    2.网上搜索了一个比较好的低版本浏览器的方案

    avalon2 大家都有推荐,是我们比较厉害的大佬司徒正美开发的,可惜天忌英才,正美大佬还没来得及完善文档就离开我们了,惜哉,虽上手简单但相关资料较少。

    3.后来考虑到了主流的react框架以前版本是否兼容老版本,很多人也都有在github上上传搭建环境相关项目,自己也下载并安装了一些。但真正兼容的没有几个,下载并安装了差不多10个项目,每一个项目我都一一尝试。

最终功夫不负有心人,后来终于找到了这个仓库(亲测有效)。项目已经成功在ie8中启动起来了。

虽然它仅仅引用了react,全家筒和antd都没有引用,但也拓开了思路,你自己可以download下来试试,如果你痛苦于解决vue项目对ie8的兼容问题,不防换个思路,撸起react,自己引入一些低版的react功能库。开启兼容ie8之旅吧!

仓库地址:github.com/xcatliu/rea…

技术版选型可以参考下面这个地址:

www.dazhuanlan.com/2019/12/16/…