Question

我正在使用vue-cli webpack样板构建一个项目。我在Foo.vue目录中有一个单独的文件Vue组件components，该目录还包含导入和导出index.js的{{1}}文件：

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进行了任何修改并保存，Webpack的热重新加载，则页面会刷新，并且Bar.vue会正确呈现。此外，<foo>现在向我显示控制台中的整个Vue对象。

此外， console.log(Foo)如果我使用

导入总是正确

<foo>

这里发生了什么？在初始加载和热重新加载时，ES6模块语法的处理方式是否不同？

旁注：

以下是关于我的实际项目的更多详细信息，我认为这与此错误无关，但我将在此处包含以防万一。

import Foo from 'components/Foo'也位于Bar.vue目录。
components本身由另一个Vue组件导入。
Webpack版本：2.2.1
Babel核心版本：6.22.1

如果有任何其他配置文件或其他任何有助于诊断的信息，请告诉我。

Answer 1

我知道这个问题很旧，但是也许我的回答仍然可以帮上忙。

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'在这里是否有效，但我认为它们很好地描述了问题。使用这些术语时仍要小心，不要引起误会！！

Answer 2

它对我有用的是：

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

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

2 个答案: