Как подружить Vue с IE?

Question

[Иоанн]

Кто сталкивался с такой проблемой, может кто подскажет?
Приложение на vue-cli 3 + vuetify. В IE и Edge пустая страница.
Из гуглежа я понял, что проблема в том сто майкрософту плевать на es6. Так же нашел совет, что нужно установить и импортировать babel-polyfill. Но это не дало ни какого результата.
Может кто решал такую проблему у себя?

Comments

[Дмитрий]

Добрый день.
История с "ишаком" давняя, вечно что-то не так с ним.
Правда я не пользовался новыми версиями, но рекомендую забить на него или сделать как на одном забугорном сайте, кажется австралийском.
Они сделали проверку, и если пользователь заходил с "ишака", то выводили модальное окно с рекомендацией установить нормальный браузер.
Вот как-то так)))

[Иоанн]

Дмитрий, к сожалению мне данный вариант не подходит.
Вот интересно сайт vuetify работает на своих скриптах? Как то же они решили проблему.

[Дмитрий]

Иоанн, ну значит как-то решили.
А что насчёт ошибок в браузере?

[Иоанн]

Дмитрий,
SCRIPT1002: Синтаксическая ошибка
app.js (11900,1)

[Дмитрий]

Иоанн, значит её надо исправить. ищите ответ по решению проблемы в связке с ie.

[Дмитрий]

Иоанн, https://www.google.com/search?q=SCRIPT1002

[Иоанн]

Дмитрий, еслиб было так всё легко. Искал уже. И единственный вывод что сделал - это то, что упаковывается не так как надо ИЕ

[ArtemGum]

Проходишь по всем ошибкам и меняешь синтаксис на es5

[Иоанн]

ArtemGum, после вэбпака? Ты когда нибудь пробовал сам это сделать? Код нечитаемым становится.
Да и мне что его после каждой переупаковки исправлять?

[Иоанн]

Я так понимаю вариант заставить вэбпак при упаковке менять стрелочные функции на анонимные, и я так понимаю ему должен в этом помочь какой то модуль... А вот какой?

[ArtemGum]

Я так подружил древний ангуляр с ie11. Ошибок было не так много, в основном ie не понимает деструктуризацию и некоторые современные методы объектов.

[Иоанн]

SCRIPT1002: Синтаксическая ошибка
app.js (15367,1)

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue */ \"./node_modules/vue/dist/vue.runtime.esm.js\");\n/* harmony import */ var ..............

Ещё бы понять что он хочет. В нэте пишут, что это ошибка из-за стрелочных функций, не пойму... тут стрелок то нет?

[vouvouvotche]

Как настроить совместимость проекта vue.js для IE 11?
попробуйье как тут

[Иоанн]

vouvouvotche, первое, что я пробовал

[PEMOK]

Попробуй bootstrap под vue, только старую версию, где они polyfill не убрали

2.0.0 rc 16 она нормально под ie 11 и edge работает

[Иоанн]

PEMOK, я бутстрап не использую, я вьютифай использую

[vouvouvotche]

Иоанн, а скиньте плз содержимое babel.config.js

[Иоанн]

vouvouvotche, какой из вариантов? я их штук 7 вариантов пробовал.

[Сергей Некрасов]

А если убрать vuetify, то все ок отображается? Если да, то наверняка с этой проблемой уже сталкивались и надо идти в issues на github vuetify и искать вопрос с ie

[Иоанн]

Сергей Некрасов, да как то наоборот. С вьютифай вроде как работает без доп. кода, а вот когда начинаю пользовать "вкусняшки" ES6 начинается фигня. А как то не хочется возвращаться в "средние века" ради IE. Вот я и надеялся найти инструмент который будет переводить код из современного в средневековый (((

[Дмитрий]

Since @babel/polyfill was deprecated in 7.4.0, we recommend directly adding core-js and setting the version via the corejs option.

https://babeljs.io/docs/en/babel-preset-env

[Иоанн]

Дмитрий, видел я эту статью. Не помогло.

[Дмитрий]

Иоанн, мне помогло.

Answer 1

[Roman Alekseiev]

Столкнулся с этой проблемой полгода назад. Решил проблему таким образом:
1. В application.js

import "@babel/polyfill";
import { app } from '../project/index'

document.addEventListener('DOMContentLoaded', () => {
  app.$mount('#app')
});

2. В index.js

import * as Vue from "vue/dist/vue.common";

import "core-js/stable";
import "regenerator-runtime/runtime";

import Vuetify from "vuetify";
....
и так далее

Надеюсь поможет, проверил только что на Edge - работает нормально

Comments

[Иоанн]

Не совсем понял. Под index я так понимаю подразумевается main? А второй что за файл?

[Roman Alekseiev]

А черт его знает, уже не помню. Структуру создавал не я, по сути в этом файле просто монтируется Vue шаблон на приложение

[Иоанн]

Roman Alekseiev, понял что куда, но к сожалению не сработало ((

[Roman Alekseiev]

Хм, странно. А в package.json у Вас что?

[Иоанн]

Roman Alekseiev,
"dependencies": {
"@babel/polyfill": "7.7.0",
"@mdi/js": "4.5.95",
"core-js": "3.4.8",
"material-design-icons-iconfont": "5.0.1",
"vue": "^2.6.10",
"vue-resource": "1.5.1",
"vue-router": "3.1.3",
"vue-socket.io": "3.0.7",
"vuetify": "^2.0.0",
"vuex": "3.1.1"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.11.0",
"@vue/cli-plugin-eslint": "^3.11.0",
"@vue/cli-service": "^3.11.0",
"babel-eslint": "^10.0.1",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"sass": "^1.17.4",
"sass-loader": "^7.1.0",
"vue-cli-plugin-vuetify": "0.6.3",
"vue-template-compiler": "^2.6.10",
"vuetify-loader": "^1.2.2"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {
"no-console": "off"
},
"parserOptions": {
"parser": "babel-eslint"
}
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": "> 0.25%, not dead"

Answer 2

[marsdenden]

А чем собирается проект? У меня webpack прогоняет через babel и все работает в IE
Кусок конфигурации webpack.config.js

module: {
		rules: [

			{
				test: /\.js$/,
				loader: 'babel-loader',
				exclude: /node_modules/
			},

Comments

[Иоанн]

vue-cli собирает

[marsdenden]

Иоанн, а babel настраивали, как тут описано?

[Иоанн]

marsdenden, да, и это я тоже пробовал. К сожалению не помогло.

Answer 3

[smytsykov]

Лучше использовать vue 2, от 3 толку нет, если бейбл перегогяет его в гет и сет

Comments

[Кеша Пуделев]

Vue и vue-cli – это разные вещи.