Vue ie11 не работает

Vue не работает в IE11 несмотря на вавилонский полифилл

к сожалению, мое последнее приложение требуется для поддержки Internet Explorer 11. Это требование стало для меня несколько неожиданным, поэтому я уже построил интерфейс приложений с помощью Vue.JS. Бэкэнд написан на языке Laravel, поэтому я использую laravel-mix/webpack.

Очевидно, что IE11 не поддерживает Vue.js поэтому я попробовал следующие способы транспилирования / полифилирования кода.

1. требуется полифилл

Подход : добавление require(«@babel/polyfill»); в верхнюю часть моего app.js , как описано в https://babeljs.io/docs/en/babel-polyfill

Результат : следующее сообщение об ошибке, показанное в консоли IE:

Очевидно, проблема совместимости, так как pre data()<> недопустим в ES

2. используя смесь.вавилонское столпотворение

Подход : добавление 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 теперь выглядит так:

Результат : то же сообщение об ошибке, что и в 1

3. использование расширения mix

Подход: установка этого расширения: https://laravel-mix.com/extensions/polyfill и настройте мой webpack.mix.js , как описано выше. Мой webpack.mix.js теперь выглядит так:

Результат: опять то же сообщение об ошибке, что и в 1

4. ручная транспилировка с помощью babel-cli

Подход : просто от отчаяния я попытался вручную транспилировать свой app.js со следующей командой require(‘./bootstrap’); window.Vue = require(‘vue’); 3

Результат : все еще не повезло, та же ошибка, что и в 1

Я действительно начинаю расстраиваться, поэтому любая помощь очень ценится.

Источник

VUE CLI-3 Project not working on IE-11

I have created an project in vuejs using vue-cli3. It working fine on chrome browser but in IE-11 version blank screen is shown with the following error in console as mentioned in this link: https://drive.google.com/file/d/1QaNwK1ekI2BwFsFyjvgbSsvwHBCmlcAD/view?usp=drivesdk On clicking console error that I have pointed in above screenshot, it opens a screen as display in given link https://drive.google.com/file/d/1_QXVjcw3cmqeC70LfNyLcr__rnXVIZIh/view?usp=drivesdk with the error in mini-toastr package: Here is my babel.config.js file code:

and .browserslistrc file code :

I am not getting where I am doing a mistake. Is anything I am missing? If anyone need some more info please let me know. Thanks!

2 Answers 2

I finally ended up with the solution of above issue. To run project on IE-11 version just follow the 2 steps:

1. Install babel-polyfill using command «npm install —save babel-polyfill».
2. Import babel-polyfill in your main.js or index.js file at the top of above all imported packages. For e.g Here is your main.js file.

Note: If you import babel-polyfill at the end it does’t work.

Another solution: use the power of vue-cli-3 to leverage browser support: https://cli.vuejs.org/guide/browser-compatibility.html#modern-mode

Just one option when building and you’re done once you’ve chosen browserslist to support 🙂

This should work well for building an app.

Not the answer you’re looking for? Browse other questions tagged vuejs2 vue-cli-3 or ask your own question.

Linked

Related

Hot Network Questions

Subscribe to RSS

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

site design / logo © 2021 Stack Exchange Inc; user contributions licensed under cc by-sa. rev 2021.10.19.40496

By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.

Источник

Is your Vue app not working in IE 11? Here’s how to fix it.

This is a post borne out of frustration. It’s a last-ditch effort to help all those poor souls out there scratching their eyeballs out trying to find a solution to the dreaded IE white screen of death. I don’t want to over-promise and say this will fix every single IE edge case, but I will offer some helpful steps to debug your Vue app in IE 11. Hopefully, at a minimum, it takes you one step closer to fixing your app so you can (finally) go to bed and sleep like a rock.

Here’s some of the errors you might have encountered when running your Vue app in IE 11:

• SCRIPT1002: Syntax error
• SCRIPT5022: Exception thrown and not caught
• SCRIPT438: Object doesn’t support property or method ‘defineProperty‘
• Object doesn’t support property or method ‘bind’

The error in your console might vary, but if you’re getting a white screen of death, or perhaps a partial white screen, then try the steps outlined in this post to diagnose and fix the issue.

Note: If you’re on a Mac and don’t have Internet Explorer installed on your computer, check out the Microsoft Virtual Machines page to download a complete VM setup with IE 11 installed.

Note 2: This post assumes you are using Vue Cli 3* or later. This means, you have a dedicated vue.config.js file. If you don’t, then you can still follow along and update your *webpack configurations accordingly (no guarantees though).

OK, now the housekeeping is done. Lets begin:

Why is this error happening?

The main reason why your Vue app is breaking in IE11 is because the browser does not support modern JavaScript syntax. By that I mean ES2015 and beyond. The Internet Explorer browser was deprecated in favour of Microsoft’s more modern Edge browser. I recently downloaded Edge on Mac and gotta say, it’s actually really good!

Despite Edge being the default browser for modern Windows machines, IE11 still takes up 1.75% of global browser market share. In tech terms, IE 11 is truly a dinosaur, but the reality is that there are still thousands of government sites, enterprise systems and web applications that require long term support for older browsers.

So if IE11 can’t run modern JavaScript code, what can you do? In most cases you can either:

• transpile your code (transform modern code and replace with older, supported code) or;
• polyfill your code (emulate certain APIs, so can use them as if they were already implemented) or;
• combine both approaches where necessary.

Where is this error happening?

Sometimes it can be incredibly hard to trace the true source of the error in your Vue code. This is because Webpack bundles all the modules required by the app into one giant script (usually called vendors.js, chunk-vendors.js, or app.js). If you try to follow the error stack trace, it generally ends up something like this:

Clicking on chunk-vendors.js in the console brings up the code file in the debugger. Your error and the broken code will vary, but here’s an example of what you might see:

So, we get here but there isn’t any obvious line of code that is broken. Webpack minifies everything and uses the eval( ) function to parse our Vue code. There is absolutely no way that we can go through this code line by line.

So what then? Well, if you look up on line 7562 you’ll see that we get a little hint of what code is being compiled. In this case it is a debug module found in the app’s node modules.

How to break up your node modules for easier debugging

Did you know you can break down your node modules into separate JS files? This allows you to load each individually instead of a massive 7000+ line webpack blob!

Add this to your vue.config.js file.

Basically we are splitting our node modules into chunks so that we can identify exactly which package contains the code that is breaking our application. This is really helpful because you can now do your research and check out the package’s GitHub / npm page and see if there are any issues relating to IE11.

In most cases this trick will help you find the package that is causing the error/s in your code. However, there will unfortunately be some cases where a package simply will not support IE 11 (eg) vue-page-transition.

How to transpile your Vue code

Method 1: Use core-js upfront:

If you’ve used Vue Cli 3 to generate your app, then core-js comes built in. Core-js is a JavaScript library which includes polyfills for ECMAScript up to 2020: promises, symbols, collections, iterators, typed arrays, many other features. You can load only required features or use it without global namespace pollution.

The easiest way to include it in your app is to add it at the top of the main.js file:

In your package.json file you can add a list of browsers you wish to support, which means core-js will run only in those browsers.

You can also extract this out into a .browserlistrc file instead of putting it in with your other package.json configuration.

Method 2: Add your dependencies to «transpileDependencies» in vue.config.js:

Inside the vue.config.js file you can include an option called transpileDependencies. You can read more on the Vue docs here. By default babel-loader ignores all files inside node_modules . If you want to explicitly transpile a dependency with Babel, you can list it in this option.

If you followed the tip above and broke up your dependencies then it will be much easier to know which package is causing the issues. In the example case above, it was the debug package. When I added that to the transpileDependencies list, my app worked again.

Watch Out: Your dependencies might rely on other dependencies!

The transpileDependencies option will transpile your package.json dependencies, however, it does not include the dependencies of those dependencies 😱. In other words, if the «debug» package uses a fancy ES2020+ package for it’s fancy debug algorithm, then you will also need to include that package too!

Tip: You can find out what other packages a dependency relies on in your package.lock.json file.

Here’s a real example case that I ran into recently:

As I was poring over my dependencies trying to understand where the issue was, I realised that I was running into some code that wasn’t being fixed with the transpile step noted above. I was using a package called lru-memoize and knew the error occurred there because I had broken down all my packages in the aforementioned step.

I found out that the code was breaking after requiring another package: lru-cache. When I also added that to the transpileDependencies list, things started working again!

I hope these tips helped. If you have any other helpful suggestions, please leave me a comment below and I’ll be sure to update this post!

Learn Vue fast with The Complete Guide (inc. Vue Router, Vuex, & Vue 3 Composition API)

Learn and master one of the hottest JS frameworks out there! You will learn everything there is to know about VueJS with real examples and demo projects. This course is full of exercises, challenges and bigger web app projects that allow you to directly practice what you learned. This a serious portfolio booster if you’re looking to learn a modern JavaScript framework similar to React and Angular.

Источник

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

Простой 6 комментариев

babel-presets-env установлен и в таргетсах ие11 указан?

Нужно транспилировать не только свой код, а и код vuetify:

Я наконец-то заставил его работать, ответ от Кирилл Романов был очень полезным.
Что нужно сделать:
1) установить core-js@3

npm install core-js@3

2) отредактируйте main.js вот так:

3) редактировать babel.config.js

Если я не ошибаюсь, там из коробки поддержка IE9+, так что косяк явно в твоем коде, либо в модулях подключенных, которые ты не трансплитишь.

Источник

Проект VUE CLI-3 не работает на IE-11

Я создал проект в vuejs с помощью vue-cli3. Он работает нормально в браузере Chrome, но в IE-11 пустой экран отображается с следующее сообщение об ошибке в консоли, как указано в этой ссылке: https://drive.google.com/файл/д/1QaNwK1ekI2BwFsFyjvgbSsvwHBCmlcAd/посмотреть?УСП=drivesdk при нажатии, ошибка в консоли, что я указал на скриншоте выше, то откроется экран как дисплей в данной ссылке https://drive.google.com/файл/Д/1_QXVjcw3cmqeC70LfNyLcr__rnXVIZIh/посмотреть?УСП=drivesdk с ошибкой в мини-toastr пакет: Вот мой код файла babel.config.js:

и код файла .browserslistrc :

Я не попадаю туда, где совершаю ошибку. Неужели я чего-то не понимаю? Если кому-то понадобится дополнительная информация, пожалуйста, дайте мне знать. Спасибо!

2 ответа

У меня есть проект Vue Cli 3 с установленным и настроенным плагином @vue/cli-plugin-pwa (в vue.config.js ), но когда я запускаю vue-cli-service build —modern , никакой manifest.json не генерируется на основе моей конфигурации. Я ожидаю увидеть manifest.json , который будет содержать, по крайней.

Я пытаюсь добавить webpack.ProvidePlugin , который не работает на Vue-cli 3 . Я также попытался установить lodash в качестве глобального импорта (поэтому мне не придется импортировать его в каждый модуль магазина). vue.config const webpack = require(webpack); module.exports = < configureWebpack: <.

В конце концов я пришел к решению вышеуказанной проблемы. Чтобы запустить проект на версии IE-11, просто выполните 2 шага:

1. Установите babel-polyfill с помощью команды «npm install —save babel-polyfill».
2. Импортируйте babel-polyfill в файл main.js или index.js в верхней части всех импортированных пакетов. Например,вот ваш файл main.js.

Примечание : Если вы импортируете babel-polyfill в конце, это не сработает.

Другое решение: используйте силу vue-cli-3, чтобы использовать поддержку браузера: https://cli.vuejs.org/руководство/браузер-compatibility.html#модерн-режим

Только один вариант при сборке, и вы закончите, как только выберете browserslist для поддержки 🙂

Это должно хорошо работать для создания приложения.

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

Я начал проект с использованием шаблона vue-cli webpack (simple). Когда я пытаюсь построить для выпуска с помощью npm run build , я получаю свою папку dist с ожидаемым build.js и т. д., А при.

У нас есть проект vue-cli 3. Он работает довольно хорошо и компилируется без проблем. Дело в том, что мы должны поддерживать старый браузер, поддерживающий только код ES5. В проект мы интегрировали.

Я использую Vue CLI 3 с Vuetify для своего проекта. Он хорошо работает на Chrome и iOS 12, но показывает пустую страницу на IE11 и iOS Safari

Источник