Vue.js：在 HMR 上解决的不一致的“未知自定义元素”

Question

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

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

问题

使用开发服务器时，我在一个组件（现在有几个）中遇到了不一致的“未知自定义元素”问题。这似乎只有在我重新加载页面时才会发生，并且如果我提示开发服务器进行热模块重新加载 (HMR)（即更改模板中的某些内容并保存文件），它将开始正常工作。

• 成分： PropertyEditForm
• 进口组件： ViewEditChip
• ViewEditChip 在其他组件中使用没有问题
• 我按预期分配组件 PropertyEditForm
  • components: {'view-edit-chip': ViewEditChip} (ts)
• 如果我触发 HMR，此问题就会消失，但在重新加载应用程序后始终存在

错误：

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

代码

记住这是使用类组件语法的 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是从其他工作组件复制/粘贴的
• 网络包问题？

附加信息

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

例如，我有一个FileSystemTree, FileSystemToolbar, &FileSystemMainView组件。如果我在视图中使用这些，FileSystemView它会按预期工作。如果我FileSystem在与上述三个相同的目录中创建一个, 组件，因此它是可重用的，即使它是从FileSystemView.

有限的解决方法示例

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

Answer 1

如果此问题的发生不一致，并且您的程序在热重载后按预期工作，但在刷新后却未按预期工作，则您可能是在 Vue 初始化后注册组件。以下是 main.js 中 vue-js-modal 的错误和正确全局组件注册的示例。

例如（不正确）：

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')