Ben*_*rke 1 ecmascript-6 webpack vue.js babeljs babel-polyfill
Vue CLI 3 / Webpack 如何处理对旧浏览器的支持？基本上，我的 Vue 应用程序在 iPhone 7/8 和 Chrome 桌面（最新版本）上运行得非常好。但是在 iPad 2 (iOS 9.?) 上进行测试时，它只显示来自 css 文件的背景，仅此而已 - 除了空白屏幕之外别无他物。这发生在我迄今为止制作的两个完全独立的网络应用程序上，所以我认为这不是编码错误。我在想我需要在vue.config.js文件中添加一些东西来支持旧浏览器吗？我看不出这是一个 css 问题，因为我没有使用grid或任何现代的东西 - 只是基本的 css，无论如何都是自动前缀的。请评论任何关于为什么它不起作用的想法！谢谢
基本上我的问题是我的 Vue CLI 3 构建步骤 ( package.json) 中没有包含 Babel 。以下说明专门针对使用 Vue CLI 3。Babel 适用于所有 Javascript，但在我的情况下，它与 Vue CLI 3 项目有关。
1）对我有用的是将行：添加
"@vue/cli-plugin-babel": "^3.2.0",
到我的package.json文件中"devDependencies":
2）babel.config.js在根文件夹中创建一个文件，其中包含：
module.exports = {
presets: [
'@vue/app'
]
}
3）添加browserslist配置。这可以是一个独立的.browserslistrc或browserslist文件，或者在我的情况下，我"browserslist":在我的package.json文件中添加了一个键- 像这样：
"browserslist": [
"defaults"
]
我"defaults"在我的特殊情况下使用，它基本上是简写：
"> 0.5%, last 2 versions, Firefox ESR, not dead"
但是可以配置此值以适合您需要支持的浏览器。有关配置的更多详细信息browserslist可以在此网站和此 GitHub 页面上找到。
完成这 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文件中包含 Babel devDependencies。
2) Vue CLI 3 默认使用 Babel 自动将您的 ES6/ES7/ES8 Javascript 代码转换为旧浏览器可以理解的熟悉的 ES5 代码。因此，如果您使用任何较新的 Javascript 语法，那么如果您想支持较旧的浏览器，则必须使用 Babel（或其他 Javascript 转译器）。
3) Babel 使用 Vue CLI 3 的默认设置不支持所有旧浏览器。您需要在您的.browserslistrc文件中配置您的文件或browserslist设置package.json以包含您需要支持的浏览器。
4) 如果您的代码仍然无法在旧浏览器上运行，请查看此页面以获取有关 Vue CLI 3 浏览器兼容性的更多信息。您还应该查看您在项目中使用的依赖项，因为它们可能会导致问题，并且您可能需要包含特定的polyfill以添加进一步的支持。
我希望这可以帮助那些遇到与我相同的问题的人，因为他们的代码在旧浏览器上不起作用。请在下面分享任何想法或评论，以增强这篇文章并进一步教育我自己和其他人关于这个特定主题。谢谢你。