vue项目上如何做ie浏览器的限制的提示。

vue项目在ie上的限制提示分为两种情况:

1、在ie9版本以下的版本情况:

  由于ie9以下的ie版本无法识别一下es6方法,所以在vue中的js无法执行,打开网站会直接白屏,没有任何显示。

  sdfds

所以代码校验浏览器的代码不能在vue中运行,可以在index.html中运行校验浏览器版本的代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <!-- <title><%= htmlWebpackPlugin.options.title %></title> -->
</head>

<script>
  // ie9版本以下的提示
  (function () {
    console.log(navigator);
    var ua = navigator.userAgent.toLocaleLowerCase();
    var browserType = "", browserVersion = "";
    if (ua.match(/msie/) != null || ua.match(/trident/) != null) {
      browserType = "IE";
      //哈哈,现在可以检测ie11.0了!
      browserVersion = ua.match(/msie ([d.]+)/) != null ? ua.match(/msie ([d.]+)/)[1] : ua.match(/rv:([d.]+)/)[1];
      if ((1 * browserVersion) < 9) {
        alert("请在ie11版本浏览器上使用系统")
      }
    }
  })();
</script>

<body>
  <noscript>
    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
        Please enable it to continue.</strong>
  </noscript>
  <div id="app"></div>
  <!-- built files will be auto injected -->
</body>

</html>

 2、在ie9版本以上的版本情况:

我们项目限制至少IE11能够使用,在router全局路由中路由守卫拦截中检测浏览器类型版本,ie11浏览器一下的跳转到到login.vue界面,在login界面提示或者限制使用IE11一下版本

router.config.js

router.beforeEach((to, from, next) => {
    function checkBrowser() {
        let ua = navigator.userAgent.toLocaleLowerCase();
        let browserType = "", browserVersion = "";
        console.log("ua ", ua);
        if (ua.match(/msie/) != null || ua.match(/trident/) != null) {
            browserType = "IE";
            //哈哈,现在可以检测ie11.0了!
            browserVersion = ua.match(/msie ([d.]+)/) != null ? ua.match(/msie ([d.]+)/)[1] : ua.match(/rv:([d.]+)/)[1];
        } else if (ua.match(/firefox/) != null) {
            browserType = "Firefox"; // 火狐
        } else if (ua.match(/opera/) != null) {
            browserType = "Opera"; // 欧朋
        } else if (ua.match(/chrome/) != null) {
            browserType = "Chrome"; // 谷歌
        } else if (ua.match(/safari/) != null) {
            browserType = "Safari"; // Safari
        }
        var arr = new Array(browserType, browserVersion);
        return arr;
    }
    let browserArr = checkBrowser();
    if (browserArr[0] == 'IE' && (1 * browserArr[1]) < 11 && to.path != "/login") {
        next("/login")
    } else {
        next();
    }
})

login.vue

// 账号密码登录
    acLogin() {
      let browserArr = this.checkBrowser();
      if (browserArr[0] == "IE") {
        if ((1 * browserArr[1]) < 11) {
          this.$message.error("请在IE11浏览器或则其他非IE浏览器进行登录!");
          return false;
        }
      }
      if (!this.loginForm.username || !this.loginForm.password) {
        this.$message({
          message: "请输入账号和密码",
          type: "warning",
        });
        return false;
      }
      var postData = {
        data: {
          username: this.loginForm.username,
          password: md5(this.loginForm.password),
        },
        platformCode: 1,
      };
      this.$axios({
        method: "POST",
        url: "/userLogin/login",
        data: postData,
      })
        .then((res) => {
          this.loginSuccess(res);
        })
        .catch(() => { });
    },
checkBrowser() {
  let ua = navigator.userAgent.toLocaleLowerCase();
  let browserType = "", browserVersion = "";
  // console.log("ua ", ua);
  if (ua.match(/msie/) != null || ua.match(/trident/) != null) {
    browserType = "IE";
    //哈哈,现在可以检测ie11.0了!
    browserVersion = ua.match(/msie ([d.]+)/) != null ? ua.match(/msie ([d.]+)/)[1] : ua.match(/rv:([d.]+)/)[1];
  } else if (ua.match(/firefox/) != null) {
    browserType = "Firefox"; // 火狐
  } else if (ua.match(/opera/) != null) {
    browserType = "Opera"; // 欧朋
  } else if (ua.match(/chrome/) != null) {
    browserType = "Chrome"; // 谷歌
  } else if (ua.match(/safari/) != null) {
    browserType = "Safari"; // Safari
  }
  var arr = new Array(browserType, browserVersion);
  return arr;
}
原文地址:https://www.cnblogs.com/aidixie/p/14250859.html