时间戳

首页 > 解决方案 > 尽管 Babel Polyfill，Vue 无法在 IE11 中工作

vue.js - 尽管 Babel Polyfill，Vue 无法在 IE11 中工作

问题描述

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

这是我的app.js：

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

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

1.需要polyfill

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

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

SCRIPT1003：“：”预期

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


2. 使用 mix.babel

方法：添加mix.babel(['resources/js/app.js'], 'resources/js/app.js')到我的https://laravel.com/docs/5.8/mixwebpack.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中的错误相同

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

标签： vue.jswebpackinternet-explorer-11babeljsbabel-polyfill

解决方案

如果你不能开始Babel-Polyfill工作，你可以尝试使用Polyfill.io，如果浏览器需要它们，它会自动填充选定的 Polyfill。

您需要做的就是转到Create a polyfill bundle页面，然后选择您需要的 polyfill。然后，一旦您制作了捆绑包，请复制顶部的 URL 并将<script>带有所述 URL 的标签添加到您的head.

我个人没有将它与 Laravel 一起使用，但我自己之前曾与 babel-polyfill 进行过斗争，并最终使用了 Polyfill.io，因为我无法让 babel-polyfill 工作。

推荐阅读