Асинхронная загрузка компонента в Vue.js не работает
Я пытаюсь заменить загрузку компонента v-подсказкаVPopper со стандартной загрузки на асинхронную.
Стандартная загрузка - компонент загружен и работает нормально
import { VPopover } from 'v-tooltip'
export default {
components: {
VPopover
}
}
Асинхронная загрузка - компонент загружен неправильно
export default {
components: {
VPopover: () => import('v-tooltip')
},
}
По какой-то причине указанное выше не работает, и компонент загружается неправильно. Может быть, потому что это не экспорт по умолчанию, а именованный экспорт в компоненте v-tooltip Vue?
Я использую Webpack сзади.
Если я загружаю свой пользовательский компонент асинхронно, он работает должным образом. Например, это работает для меня:
export default {
components: {
MyCustomComponent: () => import('@/components/MyCustomComponent.vue')
}
}
@gugadev Хм, хорошо, я понял. Это не мой компонент, а компонент пакета v-tooltip, установленный через npm и включенный в package.json. Что еще я могу сделать, или мне придется разветвлять пакет и исправлять это?
Просто создайте оболочку, в которой импортируйте библиотеку и экспортируйте ее по умолчанию: import { SomeName } from 'v-tooltip'; export default SomeName;.
Ответы 1
Как @gugadev отметил выше
The lazy module import returns a Promise with the module export, in your case an object containing the named export. Vue don't know what of the named exports should import, so, simply does nothing.
Я нашел это решение, которое работает
export default {
components: {
VPopover: () => import('v-tooltip').then(m => m.VPopover)
}
}
Ленивый импорт модуля возвращает обещание с экспортом модуля, в вашем случае объект, содержащий именованный экспорт. Vue не знает, что из названного экспорта следует импортировать, поэтому просто ничего не делает. Просто экспортируйте компонент по умолчанию.