TL; DR:
По сути, моя проблема заключалась в том, что я не включил Babel в мой шаг сборки Vue CLI 3 (package.json). Приведенные ниже инструкции предназначены специальнона пути к использованию Vue CLI 3. Babel работает со всем Javascript, но в моем случае это связано с проектом Vue CLI 3.
1) Для меня сработало добавление строки:
"@vue/cli-plugin-babel": "^3.2.0",
в мой файл package.json в "devDependencies":
2) Создание файла babel.config.js в корневой папке, содержащего:
module.exports = {
presets: [
'@vue/app'
]
}
3) Добавление конфигурации browserslist.Это может быть автономный файл .browserslistrc или browserslist, или в моем случае я добавил ключ "browserslist": в свой файл package.json - вот так:
"browserslist": [
"defaults"
]
Я использовал "defaults" в моем конкретном случае, который в основном сокращен для:
"> 0.5%, last 2 versions, Firefox ESR, not dead"
Но это значение можно настроить в соответствии с тем, какие браузеры вам необходимо поддерживать.Более подробную информацию о настройке browserslist можно найти на этом сайте и на этой странице GitHub .
После того, как я выполнил эти 3 шага, у меня было полностью работающее веб-приложение Vue, работающее на старом iPad 2 под управлением iOS 9 и, по сути, отвечающее на мой первоначальный вопрос выше.
Расширенный ответ
Я не уверен, почему этот вопрос получил отрицательные отзывы, поскольку это распространенная проблема, которая сбивает с толку многих новичков в Vue или Webpack, или даже просто старый ванильный Javascript.Проблема заключается в том, что если вы используете синтаксис Javascript ES6 / ES7 / ES8, тогда ваш код не будет работать в старых браузерах без его переноса .
Главное, что следует отметить при использовании Vue CLI 3Создание и сборка проекта заключается в том, что он по умолчанию будет использовать Webpack под капотом для компиляции вашего проекта при запуске команды сборки.Тем не менее, Webpack может быть настроен для создания вашего проекта множеством способов, и один из этих способов может включать использование Babel.В двух словах, Babel - это транспортер кода Javascript, который позволяет вам использовать функции / синтаксис Javascript ES6 / ES7 / ES8, которые старые браузеры не поддерживают (или новые браузеры пока не поддерживают), и он преобразует ваш код в обычный старый.ES5 Javascript код, который будут понятны тем более старым браузерам.
При создании нового проекта с Vue CLI 3 параметры по умолчанию будут включать использование Babel, которое автоматически переносит ваш код на этапе сборки.Но я на самом деле не знал, что такое Babel, и решил, что мне это не нужно, поэтому я вручную настроил свой проект, чтобы он не включал Babel.Это была моя главная ошибка.Без Babel Webpack просто скомпилирует ваш код, не передавая его - т.е. если он написан с использованием синтаксиса ES6 / ES7 / ES8, то так оно и останется. Это то, что по существу вызвало у меня проблему с тем, что мое приложение не работает в старых браузерах .
Однако после долгих чтений я решил свою проблему, используя шаги, описанные в TL;DR выше.Это помогло мне, и теперь у меня есть веб-приложение Vue, написанное с использованием множества функций ES6 / ES7, которое безупречно работает на старом iPad 2 под управлением iOS 9.
Итак, подведем итог:
1) НАИБОЛЕЕ ВАЖНО!- Убедитесь, что Babel включен в файл package.json в devDependencies, если вы используете синтаксис Javascript ES6 / ES7 / ES8 и вам требуется поддержка широкого спектра браузеров, в том числе старых.
2) Vue CLI 3 по умолчанию использует Babel для автоматической трансляции вашего кода Javascript ES6 / ES7 / ES8 в знакомый код ES5, который могут понять старые браузеры.Поэтому, если вы используете какой-либо более новый синтаксис Javascript, то Babel (или другой Javascript-транспортер) просто необходим, если вы хотите поддерживать более старые браузеры.
3) Настройки по умолчанию для Babel с использованием Vue CLI 3 не поддерживают ALL более старые браузеры .Вам необходимо настроить файл .browserslistrc или browserslist в файле package.json, чтобы включить браузеры, которые вам необходимо поддерживать.
4) Если у вас по-прежнему возникают проблемы с тем, что ваш код не работает в старых браузерах, проверьте эту страницу для получения дополнительной информации о совместимости браузера Vue CLI 3.Вам также следует обратить внимание на зависимости, которые вы используете в своем проекте, так как они могут вызывать проблему, и вам может потребоваться включить определенный polyfill , чтобы добавить дополнительную поддержку.
Я надеюсьэто помогает всем, кто сталкивается с той же проблемой, что и я, когда их код не работал в старых браузерах.Пожалуйста, поделитесь любыми мыслями или комментариями ниже, чтобы улучшить этот пост и дополнительно рассказать мне и другим об этой конкретной теме.Спасибо.