インポートされたVueコンポーネントのみがWebpackホットリロードに登録されました

Question

vue-cli webpack定型文からプロジェクトをビルドしています。私はFooをインポートし、それをローカルに登録しています、別のコンポーネントBar.vueで

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

：私はまた、輸入と輸出Fooindex.jsファイルが含まれているcomponentsディレクトリ内、Foo.vue、単一のファイルVueの成分を有します。私はインポート後console.log(Foo)にしようとすると、ページの読み込みで

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

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

は、コンソールは、それがundefinedを出力し、エラー

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

をログに記録します。

私はBar.vueに何らかの変更を行うと、保存した場合しかし、 、ページが更新され、中のWebPACKのホットリロードキック、そして<foo>が正しくレンダリングされます。さらに、console.log(Foo)ではコンソールにVueオブジェクト全体が表示されるようになりました。また

、私は

import Foo from 'components/Foo' 

はここで何が起こっているとそれをインポートする場合<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>