導入的Vue組件只在Webpack熱重裝上註冊

我正在從vue-cli webpack樣板構建一個項目。我有一個單一的文件Vue的組件，Foo.vue，一個components目錄也包含一個index.js文件，其中進口和出口Foo內：導入的Vue組件只在Webpack熱重裝上註冊

// 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模塊語法在初始加載與熱重新加載時處理方式不同嗎？

旁註：

這裏是我的實際項目，我沒有想到的是有關這個bug一對夫婦更多的細節，但我會在這裏包括，以防萬一。

Bar.vue也住在components目錄中。
Bar.vue本身是由另一個Vue組件導入的。
的WebPack版本：2.2.1
通天核心版本：6.22.1

讓我知道，如果有任何其他配置文件或任何幫助診斷。

來源

2017-02-10 Tony Mottaz

它的所作所爲對我的工作是：

// 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>

來源

2017-07-14 03:41:18 borracciaBlu

導入的Vue組件只在Webpack熱重裝上註冊

回答

相關問題