在旧浏览器 (IE11) 上加载 Nuxt.js 页面时显示不同的页面答案

【问题标题】：Display different page when loading Nuxt.js page on older browsers (IE11)在旧浏览器 (IE11) 上加载 Nuxt.js 页面时显示不同的页面
【发布时间】：2021-05-22 20:25:44
【问题描述】：

在我的 nuxt.js 应用程序无法在 IE11 上运行后（可能是由于错误传递的依赖项），我正在寻找一种解决方案，以便在 IE 11 中加载页面时显示不同的网页。

问题是，根据 IE11，我的 JS 包含语法错误，因此我正在寻找可以编程到 app.html 文件中的解决方案。我在 app.html 中尝试了以下代码来运行一个脚本，然后自动更改 head 和 body 属性的内容。

<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
  <head {{ HEAD_ATTRS }}>
    <script>
      function isIE() {
          const ua = window.navigator.userAgent;
          const msie = ua.indexOf('MSIE ');
          const trident = ua.indexOf('Trident/');
          return (msie > 0 || trident > 0);
        }
      if (isIE()) {
        document.write('<body>oudebrowser</body>')
      } else {
        document.head.innerHTML = "{{ HEAD }}"
        document.write('<body {{ BODY_ATTRS }}>{{ APP }}</body>')
      }
    </script>
  </head>
</html>

问题是我无法转义{{ HEAD }} 变量的内容，所以我担心这种尝试的解决方案会导致死胡同。

【问题讨论】：

我对支持的浏览器使用像IE11。并相应修改 nuxt.config.js 和 app.html 中的内容。 {{ HEAD }} 的内容应该来自 nuxt.config.js。
好吧，我想通了，问题是其中一个模块无法与 IE 一起使用。所以我不得不将它添加到nuxt.config.js中的build.transpile

标签： nuxt.js

【解决方案1】：

您可以使用browserslist 设置您希望 Babel 转译到的浏览器。

您也可以尝试使用魔法 cmets，但我不建议这样做，因为它将直接在 HTML 中完成：ie conditional comments need explanation

此外，IE 目前已被 Microsoft 自己弃用。除了许多公司已经不支持它之外。所以，如果你没有从一些 IE 用户那里获得大量现金，你也应该停止支持 IE：https://death-to-ie11.com

放下它，争取更快、更好、更轻松的网络应用体验。

PS：Vue3 也不支持 IE。

【讨论】：