vue項目上如何做ie瀏覽器的限制的提示。

本文轉載自查看原文 2021-01-08 17:22 551 vue入坑記錄

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();
    }
})

// 賬號密碼登錄
    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;
}

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 VUE項目兼容IE瀏覽器如何讓vue項目兼容IE瀏覽器 vue項目兼容IE瀏覽器 Vue項目兼容IE瀏覽器 vue項目檢測IE瀏覽器版本，版本太低給出提示 vue 項目在ie瀏覽器下頁面顯示為空 vue項目在IE瀏覽器下的異常解決 vue項目 ie瀏覽器下打開頁面空白 vue-cli項目在ie瀏覽器上不顯示解決vue項目在ie瀏覽器緩存問題。