Razbezhkin
@Razbezhkin
программист, преподаватель

Как выполнять диагностику компиляции vue проекта?

Здравствуйте.
Есть проблема, самое простое приложение, состоящее из нескольких элементов не работает в IE11, хотя в документации к vue указано, что он поддерживается с полифилами.

После компиляции проекта, и открытии страницы (index.html), в IE11 приложение не работает, в google chrome работает.
Очевидно, полифилы не обработали исходники так, чтобы IE11 мог выполнить приложение.
Вопрос: каким путем идти для выявления, все ли в порядке.

Я так "понимаю" (хотя не очень вериться), vue-cli, который я использую, это волшебный инструмент, который сам (!?) все что мне нужно должен сделать. Но поскольку желаемый результат мной не достигнут, значит чего-то не то прописано в конфигах.

например, так и не понятно из документации:
- какие npm пакеты должны быть установлены в проект?
- где нужно указывать совместимость с браузерами: в файле ".browserlistrc", в параметре " "browserslist" файла package.json, в файле "babel.config.js" или где то еще.
- как именно нужно указать, что нужна совместимость с ie11?

Пока что много вопросов и нет четкой схемы какие vue.exe выполняет действия при компиляции. Есть ли какая-то внятная документация (кроме исходников) как этот процесс выполняется?

PS.
В папке проекта я использовал команду: npx browserslist
В результате я получил большой список браузеров, в том числе и
ie 11
ie 10
(является ли вывод этой команды подтверждением того, что скомпилированное приложение vue будет поддерживаться соответствующими браузерами)
но в IE11 приложение не выполняется вообще, зато в консоли есть ошибка ""Symbol" не определено" в lang.js. Это так и должно быть или это все таки ошибка?
  • Вопрос задан
  • 103 просмотра
Пригласить эксперта
Ответы на вопрос 1
@grinat
в консоли есть ошибка ""Symbol" не определено" в lang.js. Это так и должно быть или это все таки ошибка?

По умолчанию включен полифил только для промисов: https://cli.vuejs.org/ru/guide/browser-compatibili... остальные сам добавляй:
Используйте useBuiltIns: 'entry' и затем добавьте import '@babel/polyfill' в файл точки входа. Это будет импортировать ВСЕ полифилы, на основе целей, перечисленных в browserslist, так что вам больше не нужно будет беспокоиться о полифилах для зависимостей, но это скорее всего увеличит размер финальной сборки некоторыми неиспользуемыми полифилами.

Т.е. в babel.config.js [["@vue/app",{useBuiltIns: "entry"}]] в main.js в самом вверху import '@babel/polyfill'
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы