Vue CLI 3 / Webpack 生产版本不适用于旧浏览器：如何添加浏览器支持？

Question

Vue CLI 3 / Webpack 如何处理对旧浏览器的支持？基本上我的 Vue 应用程序在 iPhone 7/8 和 Chrome 桌面（最新版本）上运行得非常好。但是在 iPad 2 (iOS 9.?) 上进行测试时，它只显示 css 文件中的背景，仅此而已 - 除了空白屏幕之外别无其他。到目前为止，这发生在我制作的两个完全独立的网络应用程序上，所以我认为这不是编码错误。我在想我需要在vue.config.js 文件中添加一些内容以支持旧版浏览器？我也看不出这是一个 css 问题，因为我没有使用grid 或任何现代的东西——只是基本的 css，无论如何都是自动前缀的。请评论任何关于为什么它不起作用的想法！谢谢

Answer 1

TL;DR:

基本上我的问题是我的 Vue CLI 3 构建步骤 (package.json) 中没有包含 Babel。 以下说明专门针对使用 Vue CLI 3。Babel 可与所有 Javascript，但在我的情况下，它与 Vue CLI 3 项目有关。

1) 对我有用的是添加以下行：
"@vue/cli-plugin-babel": "^3.2.0",
到"devDependencies":下我的package.json文件

2) 在根文件夹中创建一个babel.config.js 文件，其中包含：

module.exports = {
  presets: [
    '@vue/app'
  ]
}

3) 添加browserslist 配置。这可以是一个独立的 .browserslistrc 或 browserslist 文件，或者在我的情况下，我在我的 package.json 文件中添加了一个 "browserslist": 键 - 像这样：

"browserslist": [
  "defaults"
]

在我的特殊情况下，我使用了"defaults"，它基本上是：
"> 0.5%, last 2 versions, Firefox ESR, not dead"
但是可以配置此值以适合您需要支持的浏览器。有关配置browserslist 的更多详细信息，请参阅on this website 和this GitHub page。

一旦我完成了这 3 个步骤，我就有了一个可以在运行 iOS 9 的旧 iPad 2 上运行的完全正常工作的 Vue Web 应用程序，并且基本上回答了我上面最初的问题。

---

扩展答案

我不知道为什么这个问题会被否决，因为这是一个常见问题，会让许多 Vue 或 Webpack 的新手，甚至只是普通的旧版 Javascript 绊倒。问题在于如果您使用 ES6/ES7/ES8 Javascript 语法，那么您的代码在不转译的情况下将无法在旧版浏览器中运行。

使用 Vue CLI 3 创建和构建项目时要注意的主要事项是，默认情况下，当您运行构建命令时，它将在后台使用 Webpack 来编译您的项目。但是，可以将 Webpack 配置为以多种方式构建您的项目，其中一种方式可以包括使用 Babel。简而言之，Babel 是一个 Javascript 代码转译器，它允许您使用旧浏览器不支持（或新浏览器尚不支持）的 ES6/ES7/ES8 Javascript 功能/语法，它会将您的代码转换为普通的旧代码那些旧浏览器可以理解的 ES5 Javascript 代码。

使用 Vue CLI 3 创建新项目时，默认选项将包括使用 Babel，它会在构建步骤中自动转换您的代码。但我真的不知道 Babel 是什么决定我不需要它，所以我手动配置我的项目不包括 Babel。这是我的主要错误。如果没有 Babel，Webpack 只会编译你的代码而不转译它——也就是说，如果它是使用 ES6/ES7/ES8 语法编写的，那么它将保持不变。 这基本上是导致我的应用无法在旧版浏览器上运行的问题。

但是，经过大量阅读，我使用上面 TL;DR 中描述的步骤解决了我的问题。这对我有用，我现在有一个使用许多 ES6/ES7 功能编写的 Vue Web 应用程序，可以在运行 iOS 9 的旧 iPad 2 上完美运行。

总结一下：

1) 最重要的是！ - 如果您使用 ES6/ES7/ES8 Javascript 语法并且需要支持各种浏览器，包括较旧的浏览器，请确保您的 package.json 文件中的 devDependencies 下包含 Babel。

2) Vue CLI 3 默认使用 Babel 自动将您的 ES6/ES7/ES8 Javascript 代码转换为旧浏览器可以理解的熟悉的 ES5 代码。因此，如果您使用任何较新的 Javascript 语法，那么如果您想支持较旧的浏览器，则必须使用 Babel（或其他 Javascript 转译器）。

3) 使用 Vue CLI 3 的 Babel 默认设置不支持所有旧版浏览器。您需要在您的package.json 文件中配置您的.browserslistrc 文件或browserslist 设置以包含您需要支持的浏览器。

4) 如果您的代码仍然无法在旧版浏览器上运行，请查看this page，了解有关 Vue CLI 3 浏览器兼容性的更多信息。您还应该查看您在项目中使用的依赖项，因为它们可能会导致问题，并且您可能需要包含特定的 polyfill 以添加进一步的支持。

我希望这可以帮助遇到与我遇到相同问题的任何人，因为他们的代码在旧版浏览器上无法运行。请在下面分享任何想法或 cmets，以增强这篇文章并进一步教育我自己和其他人关于这个特定主题的知识。谢谢你。