Импортированный компонент Vue зарегистрирован только на Webpack горячей перезагрузке

Question

Я строю проект из шаблона веб-пакета vue-cli. У меня есть один файл Вью компонента, Foo.vue, внутри components каталога, который также содержит index.js файл, который импортирует и экспортирует Foo:

// components/index.js 
import Foo from './Foo.vue' 
export { 
    Foo 
} 

В другом компоненте Bar.vue, я ввожу Foo и регистрируя его на месте.

// Bar.vue 
<template> 
    <foo></foo> 
</template> 
<script> 
    import { Foo } from 'components' 

    export default { 
    name: 'bar', 
    components: { 
    Foo 
    } 
    } 
    </script> 
    <style></style> 

На странице загрузки, консоль регистрирует ошибку

[Vue warn]: Unknown custom element: <foo> - did you register the component correctly? For recursive components, make sure to provide the "name" option. 

Когда я пытаюсь console.log(Foo) после импорта, она выводит undefined.

Однако Если я делать какие-либо изменения в Bar.vue и сохранить горячую перезарядку пинки WebPack находится, обновление страницы, и <foo> визуализируются правильно. Более того, console.log(Foo) теперь показывает мне весь объект Vue в консоли.

Кроме того,<foo> будет всегда делают правильно, если я импортировать его с

import Foo from 'components/Foo' 

Что здесь происходит ?? Синтаксис модуля ES6 обрабатывается по-разному при начальной загрузке и горячей перезагрузке?

Примечание стороны:

Вот несколько более подробная информация о моем реальном проекте, что я не думаю, что имело отношение к этой ошибке, но я включу здесь на всяком случае.

• Bar.vue также проживает в каталоге components.
• Bar.vue сам импортируется другим компонентом Vue.
• Webpack версия: 2.2.1
• Вавилонская версия ядра: 6.22.1

Позвольте мне знать, если есть какие-либо другие конфигурационные файлы или что, чтобы помочь диагностировать.

Answer 1

Что она работает для меня:

// Bar.vue 
<template> 
    <foo></foo> 
</template> 
<script> 
    // alternative syntax for import 
    // import Foo from '@/components/Foo' 
    import { Foo } from 'components' 

    export default { 
    name: 'bar', 
    components: { 
     'Foo': Foo 
    } 
    } 
    </script> 
    <style></style>