如果浏览器不受支持，则显示错误消息

Question

在我的 Vue.js 应用程序中，我有以下内容package.json

  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]

我相信 Babel 使用它来自定义生成的 JavaScript（其他构建工具也可能使用它）。如果用户尝试在不受支持的浏览器中加载应用程序，我是否可以利用此支持的浏览器列表来显示错误？

我可以编写一些 JavaScript 来检测用户代理，并在浏览器不受支持时显示错误，但这可能需要我在两个地方维护支持的浏览器列表，我宁愿避免这样做。

Answer 1

首先，我想提一下，这样做可能是一个坏主意。浏览器的更新速度相当快，并且由于某些公司政策等原因，用户可能无法经常更新。更好的方法是使用功能检测，检查浏览器是否支持特定功能。这可能需要更多的工作，但给出了一个实际的理由告诉人们他们的浏览器不受支持。

您可以使用browserslist-useragent-regexp包从 browserslist 配置生成正则表达式。您可以将此正则表达式写入文件并使用它来测试navigator.userAgent您的配置是否支持。browserslist-useragent-regexp 存储库中的自述文件包含示例设置。

另一种选择是使用browserslist-useragent包，您可以为该工具提供用户代理和 browserslist 配置，以检查特定用户代理是否与 browserslist 配置匹配。此选项可能需要更多研究，因为它似乎首先针对 Node.js 应用程序。

此选项似乎已被放弃，并且有一些不再维护的依赖项，因此请自行承担风险。如果您已经在项目中使用 Webpack 4，也可以使用obsolete-webpack-plugin ，它需要较少的设置。它可以与 一起使用HtmlWebpackPlugin，并创建一个新块，当不支持浏览器时，该块将在您的页面中插入 HTML 片段。