导入的Vue组件仅在Webpack热重新加载时注册

Question

我正在从vue-cliwebpack样板构建一个项目。我在components目录中有一个文件Vue组件Foo.vue，该目录还包含一个导入和导出Foo:的index.js文件

// 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
• Babel核心版本：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>

Answer 2

我知道这个问题很老了，但也许我的答案仍然有帮助。

TL；DR-在我的案例中，它是由index.js文件中的重新导出顺序引起的循环依赖关系。我在这里找到了解决方案：https://forum.vuejs.org/t/es6-imports-from-index-file-for-component-causes-unknown-custom-element-error/27983

我也遇到了这个问题，结果发现我在index.js文件中创建了一个循环依赖项。

src/components/Foo.vue:

<template>
<div></div>
</template>
<script>
export default {
name: 'Foo'
}
</script>

src/components/Bar.vue:

<template>
<foo></foo>
</template>
<script>
import { Foo } from './'
export default {
name: 'Bar',
components: { Foo }
}
</script>

src/components/index.js

export { default as Bar } from './Bar'  // imports foo from index but foo 'has not been exported from index jet'
export { default as Foo } from './Foo'  // exporting foo from index but 'to late'

更改顺序如下：

src/components/index.js(新版本)

export { default as Foo } from './Foo'  // exporting foo from index - no problem
export { default as Bar } from './Bar'  // imports foo from index and foo 'is already present'

解决了我的问题。

我不太确定'has not been exported from index jet'、'to late'和'is already present'在这里是否是有效的术语，但在我看来，它们很好地描述了这个问题。使用这些术语时仍要小心，以免引起误解