如何在IE中向用户提示页面不支持IE（Vue2+Nuxt2环境）

因为IE无法解析ES6，Vue组件的钩子函数根本无法执行，所以必须在Vue应用初始化之前运行一段IE能识别的代码——也就是纯ES5的浏览器检测逻辑，直接放在Nuxt的自定义HTML模板里即可，完全不需要引入polyfill。

具体步骤： #

1. 若项目根目录没有app.html文件，从.nuxt/app.html复制一份到项目根目录（Nuxt允许通过根目录的app.html自定义页面模板）。
2. 在app.html的<head>标签内，添加以下纯ES5代码（放在{{ HEAD }}之后或之前都可以，只要在{{ APP }}渲染前执行）：

<script type="text/javascript">
  // 检测IE（含IE8-IE11）及旧版Edge（非Chromium内核）
  if (document.documentMode || /Edge\/\d./i.test(navigator.userAgent)) {
    // 弹出提示弹窗
    alert('当前网页不支持IE浏览器，请更换Chrome、Firefox等现代浏览器访问。');
    
    // 可选：隐藏原有页面内容，避免加载混乱
    document.body.style.display = 'none';
    
    // 可选：创建更友好的页面提示（替代弹窗）
    var tipElement = document.createElement('div');
    tipElement.style.cssText = 'position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);font-size:18px;padding:24px;background:#fff;border-radius:4px;box-shadow:0 2px 12px rgba(0,0,0,0.15);';
    tipElement.textContent = '当前网页不支持IE浏览器，请更换Chrome、Firefox等现代浏览器访问。';
    document.body.appendChild(tipElement);
  }
</script>

原理说明： #

• 这段代码完全使用ES5语法，IE所有版本都能正常解析执行。
• 它会在Nuxt渲染Vue应用（{{ APP }}）之前运行，确保IE用户打开页面就能看到提示，不会因为Vue代码无法执行而失效。
• document.documentMode是IE专属属性，能精准识别IE8-IE11；正则匹配旧版Edge则覆盖了微软过渡阶段的浏览器版本。

内容的提问来源于stack exchange，提问作者axlu