Как правильно настроить полифилы, чтобы мой веб-сайт Vue.JS работал в Internet Explorer 11?

У меня есть проект, созданный с помощью Laravel и Vue.JS (также с использованием Bootstrap-Vue). Все работает как надо во всех браузерах, включая Edge. Но, как вы уже догадались, не в IE11.

Я пробовал различные конфигурации использования babel / polyfills.

В моем webpack.mix.js у меня есть следующий код:

let mix = require('laravel-mix');

require('laravel-mix-polyfill');

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

В моем файле package.json есть следующие зависимости:

"devDependencies": {
        "@babel/polyfill": "^7.8.3",
        "axios": "^0.18.1",
        "bootstrap": "^4.3.1",
        "cross-env": "^5.1",
        "laravel-mix": "^4.0.7",
        "laravel-mix-polyfill": "^1.1.1",
        "lodash": "^4.17.5",
        "mutationobserver-shim": "^0.3.3",
        "node-sass": "^4.13.1",
        "popper.js": "^1.12",
        "portal-vue": "^2.1.4",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.15.2",
        "sass-loader": "^7.1.0",
        "vue": "^2.6.10",
        "vue-template-compiler": "^2.6.10"
    },
    "dependencies": {
        "@chenfengyuan/vue-qrcode": "^1.0.1",
        "bootstrap-vue": "^2.2.0",
        "current-device": "^0.9.1",
        "intersection-observer": "^0.7.0",
        "lottie-vuejs": "0.3.6",
        "moment": "^2.24.0",
        "v-mask": "^2.0.2",
        "vue-autosuggest": "1.8.3",
        "vue-js-toggle-button": "^1.3.3",
        "vue-recaptcha": "^1.2.0",
        "vue-social-sharing": "^2.4.7",
        "vue2-flip-countdown": "^0.9.3",
        "vuelidate": "^0.7.4"
    }

И мой файл app.js имеет это вверху, как рекомендовано в документации Bootstrap-Vue:

import '@babel/polyfill'
import 'intersection-observer' // Optional

Я также попытался добавить тег скрипта из polyfill.io в заголовок своего сайта.

Все это приводит к пустому экрану с синтаксической ошибкой SCRIPT1002 и ожидаемой ошибкой объекта SCRIPT5007. Я не уверен, где я ошибаюсь, и, к сожалению, мне действительно нужно, чтобы это работало для IE11. Ни один из моих компонентов Vue не закрывается автоматически в файлах лезвий, как ответил в аналогичном вопросе здесь. И я не использую Vue CLI.


webpack vue.js laravel internet-explorer-11 babel-polyfill
person ImranR    schedule 22.01.2020    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Поэтому я решил удалить все компоненты и плагины, чтобы посмотреть, работают ли Vue и Bootstrap-Vue самостоятельно в IE11. Он работал нормально, и я получал обычное сообщение Vue dev в консоли.

Затем я добавлял каждый модуль по одному, пока веб-сайт не перестал отображаться в IE11. Это произошло только тогда, когда был включен lottie-vuejs, и при проверке консоли отображается синтаксическая ошибка (ожидается "}".

Так что причина, по которой мой проект не работал, была связана с этим плагином.

person ImranR    schedule 23.01.2020
comment
Спасибо, что опубликовали решение этой проблемы. Я предлагаю вам попробовать отметить свой ответ как принятый ответ на этот вопрос через 48 часов, когда он будет доступен для отметки. Это может помочь другим членам сообщества в будущем в решении подобных проблем. Спасибо за понимание. - person Deepak-MSFT; 23.01.2020