가져온 Vue 구성 요소 만 Webpack 핫 리로드에 등록되었습니다.

Question

vue-cli webpack 상용구에서 프로젝트를 빌드 중입니다. 다른 구성 요소 Bar.vue에서

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

, 내가 Foo를 가져오고 로컬로 등록하고있다 : 나는 또한 수입과 수출 Foo가 index.js 파일이 포함 된 components 디렉토리 내에, 하나의 파일 뷰 구성 요소, Foo.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에 대한 수정을하고 저장하면 그러나 , , 페이지가 새로 고쳐에서 웹팩의 핫 재 장전 차기 및 <foo>이 제대로 렌더링됩니다. 더욱이 console.log(Foo)은 이제 콘솔에 전체 Vue 객체를 보여줍니다. 또한

, 내가

import Foo from 'components/Foo' 

이 무슨 일 것입니다 그것을 가져 오는 경우<foo>이 항상가 제대로 렌더링 ?? ES6 모듈 구문이 초기로드와 핫 리로드에서 다르게 처리됩니까?

사이드 참고 : 여기

내가이 버그와 관련된했다 생각하지 않았다 내 실제 프로젝트에 대한 몇 가지 자세한 내용은,하지만 난 단지의 경우 여기에 포함됩니다.

• Bar.vue도 components 디렉토리에 있습니다.
• Bar.vue 자체는 다른 Vue 구성 요소로 가져옵니다.
• 웹팩 버전 : 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>