尽管Babel Polyfill，Vue仍无法在IE11中工作

Question

不幸的是，我需要最新的应用程序才能支持Internet Explorer11。这一要求令我有些惊讶，因此我已经使用Vue.js构建了应用程序前端。后端是用Laravel编写的，因此我使用laravel-mix / webpack。

这是我的app.js：

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

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

1。需要polyfill

方法：按照https://babeljs.io/docs/en/babel-polyfill

所述，在我的require("@babel/polyfill");顶部添加app.js

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

SCRIPT1003：“：”应为

显然是兼容性问题，因为pre data(){}在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进行填充。

所有您需要做的是进入Create a polyfill bundle页面，然后选择所需的polyfills。然后，制作好捆绑包后，复制顶部的URL，并在您的<script>上添加带有上述URL的head标签。

我个人还没有将其与Laravel一起使用，但是我以前曾与babel-polyfill进行过战斗，由于无法使babel-polyfill正常工作，最终使用了Polyfill.io。