Vue не работает в IE11, несмотря на Babel Polyfill

Question

к сожалению, мое последнее приложение должно поддерживать Inte rnet 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: ':' ожидается

Очевидно проблема совместимости, поскольку предварительная версия data(){} недействительна в ES <5 </p>

2. используя mix.babel

Подход : добавление mix.babel(['resources/js/app.js'], 'resources/js/app.js') к моему webpack.mix.js, как описано в https://laravel.com/docs/5.8/mix (я использую 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 , который автоматически заполняет выбранные полифиллы, если они требуются браузеру.

Все, что вам нужно нужно сделать это go the Создайте страницу пакета полифилов и выберите нужные полифилы. Затем, как только вы создали свой пакет, скопируйте URL-адрес вверху и добавьте тег <script> с указанным URL-адресом в свой head.

Я лично не использовал его с Laravel, но Раньше я сам боролся с babel-polyfill и в итоге использовал Polyfill.io, так как я не мог заставить работать babel-polyfill.