Webpack 导入的Vue组件仅在网页包热重新加载上注册

我正在从

vue cli

webpack样板文件构建一个项目。我在

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>

这是怎么回事？？ES6模块语法在初始加载和热重新加载时处理是否不同

旁注：

这里有一些关于我的实际项目的更多细节，我不认为这些细节与这个bug有关，但我将在这里包括这些细节，以防万一

• Bar.vue

  也位于

  components

  目录中

• Bar.vue

  本身由另一个vue组件导入
• 网页版本：2.2.1
• 巴别塔核心版本：6.22.1

---

让我知道是否有任何其他配置文件或任何有助于诊断的文件。

它对我起到的作用是：

//Bar.vue
//导入的替代语法
//从“@/components/Foo”导入Foo
从“组件”导入{Foo}
导出默认值{
名称：'酒吧'，
组成部分：{
“Foo”：Foo
}
}

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

TL；DR-在我的例子中，这是一个循环依赖，由

index.js

文件中的再导出顺序引起。我在这里找到了解决方案：

我也遇到了这个问题，结果是我在

index.js

文件中创建了一个循环依赖项

src/components/Foo.vue：

<template>
  <div></div>
</template>

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

<template>
  <foo></foo>
</template>

<script>
import { Foo } from './'

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

更改顺序如下：

src/components/index.js（新版本）

export{default as Foo}from./Foo'//export Foo from index-没问题
export{default as Bar}from./Bar'//从索引导入foo，foo'已经存在'

解决了我的问题

我不太确定

“没有从index jet导出”

，

“到晚”

和

“已经存在”

是否是有效的术语，但我认为它们很好地描述了这个问题。在使用这些术语时，请注意不要引起误解

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

<template>
  <div></div>
</template>

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

<template>
  <foo></foo>
</template>

<script>
import { Foo } from './'

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