Vue 在 IE11 中不起作用，尽管 Babel Polyfill

Question

不幸的是，我最近的应用程序需要支持Internet Explorer 11。这个要求对我来说有点令人惊讶，所以我已经用 Vue.js 构建了应用程序前端。后端是用Laravel编写的，因此我使用laravel-mix/webpack。

这是我的app.js：

require('./bootstrap');
window.Vue = require('vue');

显然，IE11 不支持 Vue.js所以我尝试了以下方法来转译/填充代码。

1. 要求填充

方法：将require("@babel/polyfill");添加到app.js顶部，如 https://babeljs.io/docs/en/babel-polyfill 中所述

结果：IE 控制台中显示的以下错误消息：

SCRIPT1003："："预期

显然是一个兼容性问题，因为 predata(){}在 ES <5 中无效

2. 使用 mix.babel

方法：按照 https://laravel.com/docs/5.8/mix 中所述将mix.babel(['resources/js/app.js'], 'resources/js/app.js')添加到我的webpack.mix.js中(我使用的是 laravel 5.8.36(。我的webpack.mix.js现在看起来像这样：

const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js/app.js')
mix.babel(['resources/js/app.js'], 'resources/js/app.js')
mix.sass('resources/sass/app.scss', 'public/css');

结果：与1中的错误消息相同

3. 使用混合扩展

方法：安装此扩展：按照所述 https://laravel-mix.com/extensions/polyfill 并配置我的webpack.mix.js。我的webpack.mix.js现在看起来像这样：

const mix = require('laravel-mix');
require('laravel-mix-polyfill');
mix.js('resources/js/app.js', 'public/js/app.js')
mix.sass('resources/sass/app.scss', 'public/css');
mix.polyfill({
enabled: true,
useBuiltIns: "usage",
targets: {"firefox": "50", "ie": "11"}
})

结果：再次出现与1中相同的错误消息

4. 使用 babel-CLI 手动转译

方法：仅仅出于绝望，我尝试使用以下命令手动转译我的app.js./node_modules/.bin/babel ./public/js/app.js --out-dir ./public/js/

结果：没有运气，错误与1相同

我真的开始感到沮丧，所以任何帮助都非常感谢。

Answer 1

如果无法让Babel-Polyfill工作，可以尝试使用 Polyfill.io，如果浏览器需要，它会自动对选定的 Polyfill 进行填充。

您需要做的就是转到创建填充代码捆绑包页面，然后选择所需的填充代码。然后，一旦您制作了捆绑包，请复制顶部的 URL，并将带有所述 URL 的<script>标签添加到您的head中。

我个人没有在 Laravel 身上使用它，但我以前自己也用过 babel-polyfill，最终使用了 Polyfill.io，因为我无法让 babel-polyfill 工作。