Vue.js：在 HMR 上解析的不一致"Unknown Custom Element"

Question

我熟悉组件注册。这不是与相关的唾手可得的结果：

• Vue.js组件未知自定义元素
• 在Vue.js中嵌套组件时未知的自定义元素

问题

在使用开发服务器时，我在一个组件(现在是多个(中遇到了不一致的"未知自定义元素"问题。只有当我重新加载页面时才会出现这种情况，如果我提示开发服务器重新加载热模块(HMR((即更改模板中的某些内容并保存文件(，这种情况就会开始正常工作。

• 组件：PropertyEditForm
• 导入组件：ViewEditChip
• ViewEditChip用于其他组件而没有问题
• 我按照PropertyEditForm中的预期分配组件
  • components: {'view-edit-chip': ViewEditChip}(ts(
• 如果我触发HMR，这个问题就会消失，但在重新加载应用程序后总是存在

错误：

未知自定义元素：-您是否正确注册了组件？对于递归组件，请确保提供"name"选项。

代码

记住这是使用类组件语法的TypeScript

ViewEditChip声明：

@Component({name: 'view-edit-chip'})

PropertyEditForm声明：

@Component({
name: 'property-edit-form',
components: {
'view-edit-chip': ViewEditChip
}
})

PropertyEditForm模板用法：

<view-edit-chip :item.sync="item"></view-edit-chip>

思想

• 我不确定这是否与它的使用地点或使用方式有关
• 我怀疑这是一个与ViewEditChip本身有关的问题，或者它的重要性，因为它在许多其他地方使用时没有问题。
  • 事实上，PropertyEditForm的大部分结构都是从其他工作组件复制/粘贴的
• Webpack问题

其他信息

我的应用程序中越来越多的组件开始出现这种情况。我不知道原因，也无法提出复制的案例。所有这些错误都只发生在网站的完全重新加载时，并且在HMR上得到了修复，并且可能会也可能不会发生在相同的组件上，这取决于它们在应用程序中的使用位置，这对我来说似乎是不明智的

例如，我有一个FileSystemTree，FileSystemToolbar，&CCD_ 13组分。如果我在视图FileSystemView中使用这些，它将按预期工作。如果我在与上述三个组件相同的目录中创建了一个FileSystem组件，因此它是可重用的，那么即使它是FileSystemView代码的复制/粘贴，我也会开始收到错误。

有限解决方法示例

如果我将FileSystem向上移动一个目录，并将导入更改为子目录(具有index.ts(而不是.，那么问题就消失了。但是，如果我把它移回与它正在导入的组件相同的目录，问题就会回来。

Answer 1

如果此问题出现不一致，并且程序在热重新加载后正常工作，但在刷新后未正常工作，则可能在Vue初始化后注册组件。以下是main.js.中vue-js模态的不正确和正确的全局组件注册示例

例如(不正确(：

import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
import VModal from "vue-js-modal";
Vue.use(VModal)

应为：

import Vue from 'vue'
import App from './App.vue'
import VModal from "vue-js-modal";
Vue.use(VModal)
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')