Vue CLI 3 / Webpack 生产构建不适用于旧浏览器：如何添加浏览器支持？
Vue CLI 3 / Webpack production build not working on older browsers: How to add browser support?
Vue CLI 3/Webpack 如何处理对旧版浏览器的支持？基本上我的 Vue 应用程序在 iPhone 7/8 和 Chrome 桌面（最新版本）上运行得很好。但是在 iPad 2 (iOS 9.?) 上进行测试时，它只显示 css 文件的背景，仅此而已 - 除了空白屏幕外别无其他。这发生在我到目前为止制作的两个完全独立的网络应用程序上，所以我认为这不是编码错误。我在想我需要在 vue.config.js 文件中添加一些内容以支持旧版浏览器吗？我看不出它是一个 css 问题，因为我没有使用 grid 或任何现代的东西——只是基本的 css，它无论如何都是自动前缀的。请对它为何不起作用的任何想法发表评论！谢谢
TL;DR:
基本上我的问题是我的 Vue CLI 3 构建步骤中没有包含 Babel (package.json)。 以下说明专门针对使用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" 基本上是 shorthand 用于：
"> 0.5%, last 2 versions, Firefox ESR, not dead"
但是可以配置此值以适合您需要支持的浏览器。有关配置 browserslist 的更多详细信息，请参见 on this website and this GitHub page。
一旦我完成了这 3 个步骤，我就有了一个可以在旧 iPad 2 运行ning iOS 9 上运行的完整 Vue 网络应用程序，并且基本上回答了我上面的原始问题。
扩展答案
我不确定为什么这个问题会收到反对票，因为这是一个常见问题，会让很多 Vue 或 Webpack 的新手，甚至只是普通的老香草 Javascript。问题是 如果你使用 ES6/ES7/ES8 Javascript 语法那么你的代码将无法在旧的浏览器中运行而不转换它.
使用 Vue CLI 3 创建和构建项目时要注意的主要事项是，默认情况下，当您 运行 您的构建命令时，它会在后台使用 Webpack 来编译您的项目。但是，Webpack 可以配置为以多种方式构建项目，其中一种方式可以包括使用 Babel。简而言之，Babel 是一个 Javascript 代码转译器，它允许您使用 ES6/ES7/ES8 Javascript features/syntax 旧浏览器不支持（或新浏览器尚不支持） ) 并将您的代码转换为那些旧浏览器可以理解的普通旧 ES5 Javascript 代码。
使用 Vue CLI 3 创建新项目时，默认选项将包括使用 Babel，它将在构建步骤中自动转换您的代码。但是我真的不知道 Babel 决定了什么我不需要它所以我手动配置我的项目不包括 Babel。这是我的主要错误。如果没有 Babel，Webpack 只会编译你的代码而不转换它——也就是说，如果它是使用 ES6/ES7/ES8 语法编写的，那么它将保持这种状态。 这就是导致我的应用无法在旧版浏览器上运行的问题的根本原因。
但是，经过大量阅读后，我使用上面 TL;DR 中描述的步骤解决了我的问题。这对我有用，我现在有一个使用许多 ES6/ES7 功能编写的 Vue 网络应用程序，这些功能 运行 在旧的 iPad 2 运行ning [=102= 上完美无缺] 9.
所以总结一下：
1) 最重要的是！ - 如果你使用 ES6/ES7/ES8 Javascript 语法并且你需要支持广泛的范围，请确保你的 package.json 文件中包含 Babel devDependencies的浏览器，包括较旧的浏览器。
2) Vue CLI 3 默认使用 Babel 自动将您的 ES6/ES7/ES8 Javascript 代码转换为旧版浏览器可以理解的熟悉的 ES5 代码。因此，如果你使用任何更新的 Javascript 语法，那么 Babel（或另一个 Javascript 转译器）是必须的，如果你想支持旧浏览器。
3) 使用 Vue CLI 3 的 Babel 默认设置不支持 所有 旧版浏览器。您需要配置 .browserslistrc 文件或 package.json 文件中的 browserslist 设置以包含您需要支持的浏览器。
4) 如果您仍然遇到代码无法在旧版浏览器上运行的问题，请查看 this page for more information about Vue CLI 3 browser compatibility. You should also look at the dependencies that you're using in your project as they may be causing the problem and you may need to include a specific polyfill 以添加更多支持。
我希望这能帮助那些 运行 遇到与我相同的问题但他们的代码无法在旧版浏览器上运行的人。请在下面分享任何想法或评论，以增强此 post 并进一步教育我自己和其他人关于这个特定主题的知识。谢谢你。
Vue CLI 3/Webpack 如何处理对旧版浏览器的支持？基本上我的 Vue 应用程序在 iPhone 7/8 和 Chrome 桌面（最新版本）上运行得很好。但是在 iPad 2 (iOS 9.?) 上进行测试时，它只显示 css 文件的背景，仅此而已 - 除了空白屏幕外别无其他。这发生在我到目前为止制作的两个完全独立的网络应用程序上，所以我认为这不是编码错误。我在想我需要在 vue.config.js 文件中添加一些内容以支持旧版浏览器吗？我看不出它是一个 css 问题，因为我没有使用 grid 或任何现代的东西——只是基本的 css，它无论如何都是自动前缀的。请对它为何不起作用的任何想法发表评论！谢谢
TL;DR:
基本上我的问题是我的 Vue CLI 3 构建步骤中没有包含 Babel (package.json)。 以下说明专门针对使用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" 基本上是 shorthand 用于：
"> 0.5%, last 2 versions, Firefox ESR, not dead"
但是可以配置此值以适合您需要支持的浏览器。有关配置 browserslist 的更多详细信息，请参见 on this website and this GitHub page。
一旦我完成了这 3 个步骤，我就有了一个可以在旧 iPad 2 运行ning iOS 9 上运行的完整 Vue 网络应用程序，并且基本上回答了我上面的原始问题。
扩展答案
我不确定为什么这个问题会收到反对票，因为这是一个常见问题，会让很多 Vue 或 Webpack 的新手，甚至只是普通的老香草 Javascript。问题是 如果你使用 ES6/ES7/ES8 Javascript 语法那么你的代码将无法在旧的浏览器中运行而不转换它.
使用 Vue CLI 3 创建和构建项目时要注意的主要事项是，默认情况下，当您 运行 您的构建命令时，它会在后台使用 Webpack 来编译您的项目。但是，Webpack 可以配置为以多种方式构建项目，其中一种方式可以包括使用 Babel。简而言之，Babel 是一个 Javascript 代码转译器，它允许您使用 ES6/ES7/ES8 Javascript features/syntax 旧浏览器不支持（或新浏览器尚不支持） ) 并将您的代码转换为那些旧浏览器可以理解的普通旧 ES5 Javascript 代码。
使用 Vue CLI 3 创建新项目时，默认选项将包括使用 Babel，它将在构建步骤中自动转换您的代码。但是我真的不知道 Babel 决定了什么我不需要它所以我手动配置我的项目不包括 Babel。这是我的主要错误。如果没有 Babel，Webpack 只会编译你的代码而不转换它——也就是说，如果它是使用 ES6/ES7/ES8 语法编写的，那么它将保持这种状态。 这就是导致我的应用无法在旧版浏览器上运行的问题的根本原因。
但是，经过大量阅读后，我使用上面 TL;DR 中描述的步骤解决了我的问题。这对我有用，我现在有一个使用许多 ES6/ES7 功能编写的 Vue 网络应用程序，这些功能 运行 在旧的 iPad 2 运行ning [=102= 上完美无缺] 9.
所以总结一下：
1) 最重要的是！ - 如果你使用 ES6/ES7/ES8 Javascript 语法并且你需要支持广泛的范围，请确保你的 package.json 文件中包含 Babel devDependencies的浏览器，包括较旧的浏览器。
2) Vue CLI 3 默认使用 Babel 自动将您的 ES6/ES7/ES8 Javascript 代码转换为旧版浏览器可以理解的熟悉的 ES5 代码。因此，如果你使用任何更新的 Javascript 语法，那么 Babel（或另一个 Javascript 转译器）是必须的，如果你想支持旧浏览器。
3) 使用 Vue CLI 3 的 Babel 默认设置不支持 所有 旧版浏览器。您需要配置 .browserslistrc 文件或 package.json 文件中的 browserslist 设置以包含您需要支持的浏览器。
4) 如果您仍然遇到代码无法在旧版浏览器上运行的问题，请查看 this page for more information about Vue CLI 3 browser compatibility. You should also look at the dependencies that you're using in your project as they may be causing the problem and you may need to include a specific polyfill 以添加更多支持。
我希望这能帮助那些 运行 遇到与我相同的问题但他们的代码无法在旧版浏览器上运行的人。请在下面分享任何想法或评论，以增强此 post 并进一步教育我自己和其他人关于这个特定主题的知识。谢谢你。