Не импортировать модуль с Vue.js при использовании Internet Explorer

Question

Когда я создаю свое приложение Vue.js с помощью vue-cli-service-build, я получаю пустую страницу с Internet Explorer (но она работает с Firefox и Chrome). Я знаю, что проблема связана с CKEditor, так как он не поддерживается IE. Однако я создал условие, которое «требует» CKEditor, только если мы не используем IE. Это решение работает с vue-cli-service-serve, но не с vue-cli-service-build.

if(!usingIE())
{
alert("not using ieee");
CKEditor = require('@ckeditor/ckeditor5-vue').component;
ClassicEditor = require('@ckeditor/ckeditor5-build-classic');


}
else
{
alert("using IE");
}

Если я прокомментирую две строки, которые «требуют» модули CKEditor, и соберу приложение, оно будет работать с IE.

Если я поставил false внутри условия, но не прокомментировал две строки, это также работает с IE. Однако это не то, чего я хочу, потому что мне нужно разрешить пользователям использовать CKEditor, если они используют Chrome / Firefox.

if(false)
{
alert("not using ieee");
CKEditor = require('@ckeditor/ckeditor5-vue').component;
ClassicEditor = require('@ckeditor/ckeditor5-build-classic');
}

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

Answer 1

Вы можете попробовать использовать блоки v-if и v-else для условной визуализации компонента.

Пример:

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

Ссылки:

(1) Условное отображение

(2) Условное отображение компонента

(3) Маршрутизатор Vue.js - рендеринг условного компонента