vue项目浏览器版本判别，低于IE11跳转到新页面

一、在 public/index.html 里面添加（放在最顶部，vue渲染之前执行）

注意：必须写到 index.html，不要写到vue组件里，IE加载vue打包js之前就要拦截。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>项目名称</title>
  <script>
    // 判断IE浏览器版本
    function getIEVersion() {
      var ua = window.navigator.userAgent;
      var msie = ua.indexOf("MSIE ");
      if (msie > 0) {
        // IE 10及以下
        return parseInt(ua.substring(msie + 5, ua.indexOf(".", msie)));
      }
      if (!!window.MSInputMethodContext && !!document.documentMode) {
        // IE11
        return 11;
      }
      // 不是IE
      return 0;
    }

    var ieVer = getIEVersion();
    // ieVer>0 代表IE浏览器；小于11就跳转升级页
    if (ieVer > 0 && ieVer < 11) {
      // 跳转到升级提示页面
      window.location.href = '/browser-upgrade.html';
    }
  </script>
</head>
<body>
  <div id="app"></div>
  <!-- built files will be auto injected -->
</body>
</html>

二、升级提示页面 browser-upgrade.html

放到 public 文件夹下，和 index.html 同级。

完整页面代码，可直接复制使用：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浏览器版本过低提示</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body{
            font-family: "Microsoft Yahei",sans-serif;
            background-color: #f5f7fa;
            display:flex;
            justify-content:center;
            align-items:center;
            min-height:100vh;
        }
        .container{
            width: 90%;
            max-width:600px;
            background:#ffffff;
            padding:40px;
            border-radius:12px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.1);
            text-align:center;
        }
        .title{
            font-size:24px;
            color:#e53e3e;
            margin-bottom:20px;
        }
        .desc{
            font-size:16px;
            color:#444;
            line-height: 1.8;
            margin-bottom:30px;
        }
        .browser-list{
            display:flex;
            flex-wrap:wrap;
            gap:20px;
            justify-content:center;
        }
        .browser-item a{
            display:block;
            padding:12px 24px;
            background:#1989fa;
            color:#fff;
            text-decoration:none;
            border-radius:6px;
        }
        .browser-item a:hover{
            background:#0972d4;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2 class="title">⚠️ 您的浏览器版本过低</h2>
        <div class="desc">
            当前浏览器（IE10及更低版本）已不再被本系统支持。<br/>
            IE浏览器安全性差，并且无法兼容网站新功能。<br/>
            请下载并使用以下现代浏览器访问本站：
        </div>
        <div class="browser-list">
            <div class="browser-item">
                <a href="https://www.google.cn/chrome/" target="_blank">Google Chrome</a>
            </div>
            <div class="browser-item">
                <a href="https://www.microsoft.com/edge" target="_blank">Microsoft Edge</a>
            </div>
            <div class="browser-item">
                <a href="https://www.firefox.com.cn/" target="_blank">Firefox火狐</a>
            </div>
        </div>
    </div>
</body>
</html>

补充说明

1. 上面逻辑：IE 10及以下跳转升级页，IE11不拦截放行
   如果你也想禁止 IE11，修改判断条件：

   if (ieVer > 0 && ieVer <= 11)

2. 两个文件都放在 public，打包后路径不会出错。