vue不兼容IE怎么办?

2,700 阅读2分钟

「这是我参与2022首次更文挑战的第15天,活动详情查看:2022首次更文挑战

ie浏览器虽然已经成为了过去,但是仍然成为开发者心中抹不去的痛苦,比如我们公司的项目大都是政府内网项目,在业务对接过程中,他们大都数系统都是在ie下使用的,而且ie 因为其activex控件可以支持调用硬件设备,如打印机,所以说在政府单位还是拥有着不小的份额。

但是我们的项目大都是基于vue开发的,即使是vue2.x,也通过某些手段去支持ie8;

所以我们的方法是提供下载谷歌浏览器的页面,进行跳转即可

判断浏览器版本

当我们打开页面的时候,需要判断浏览器是谷歌,火狐还是ie;

只要浏览器启用JavaScript,navigator对象就一定存在

function IEVersion() {
      var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
      var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器
      var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //判断是否IE的Edge浏览器
      var isIE11 = userAgent.indexOf("Trident") > -1 && userAgent.indexOf("rv:11.0") > -1;
      if (isIE) {
        var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
        reIE.test(userAgent);
        var fIEVersion = parseFloat(RegExp["$1"]);
        if (fIEVersion == 7) {
          return 7;
        } else if (fIEVersion == 8) {
          return 8;
        } else if (fIEVersion == 9) {
          return 9;
        } else if (fIEVersion == 10) {
          return 10;
        } else {
          return 6; //IE版本<=7
        }
      } else if (isEdge) {
        return "edge"; //edge
      } else if (isIE11) {
        return 11; //IE11
      } else {
        return -1; //不是ie浏览器
      }
    }

我们在index.html中写下判断是否是ie及ie版本号的方法,调用,如果是符合的版本号,我们就跳转到相应的页面 if (IEVersion() == 7 || IEVersion() == 8 || IEVersion() == 9) {       window.location.href = './downGoogle.html'; } 此时,当我们用ie7,8,9版本的浏览器访问页面的时候,会跳转到downGoogle.html,

请注意,因为需要兼容ie的版本,这里请不要使用es6的语法,比如const,let等;

下载

downGoogle.html页面,只需要用a标签,放上谷歌浏览器版本的服务器地址即可,

<div class="main-content">
    <h2>很抱歉,您的浏览器版本太旧,请升级或者下载安装以下浏览器</h2>
    <p>windows</p>
    <ul>
        <li>
            <a  href="./83.0.4103.97_chrome32_stable_windows_installer.exe" download>谷歌浏览器32位</a>
        </li>
        <li>
            <a  href="./83.0.4103.97_chrome64_stable_windows_installer.exe" download>谷歌浏览器64位</a>
        </li>
    </ul>
</div>

这样,提示用户以及提供相应的浏览器下载,虽然在体验上有稍微影响,总体来说,解决了ie8以下最初不能浏览网页的问题

vue3.x已经不兼容ie版本了,未来,类似这种过渡的页面在某些单位会依旧存在,直至老旧系统的更新迭代成为过去,届时,或许有另外一个‘ie’了吧