Nuxt JS 中的全局组件

Question

我已经构建了一些组件，例如模态框和评论，我想在我网站的几乎所有地方使用和重用它们。

我在插件文件夹中创建了一个 global.js 文件，所以我只是在我的 nuxt.config.js 文件中注册了一次。

在我的 global.js 文件中，我导入了 vue 并调用了组件

import Vue from 'vue';
Vue.component('component-modal', () => import('@/components/modal'));
Vue.component('component-modal-other', () => import('@/components/modalOther'));
Vue.component('component-reviews', () => import('@/components/reviews'));

这样做的原因是，现在我不必在要使用它的每个实例上都执行component import，因为我只需调用组件<my-component>。

但是我刚刚切换到通用模式，现在我收到了来自我在插件文件夹中创建的 global.js 组件文件的水合警告。

我是否应该没有 global.js 文件，并且我想全局使用的每个组件在 plugins 文件夹中都有自己的文件？还是我只需要在需要它的文件中本地需要它时导入它？

重用和注册我创建的全局迷你组件的最佳方法是什么？

Vue 警告

The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render

我可以避免此警告的唯一方法是不要将我的组件放入 global.js 组件文件并使用 Nuxt 插件注册它。仅将组件导入到每个实例中，这会违背全局组件的目的

Answer 1

试试这个

import Modal from '@/components/modal'
Vue.component('Modal', Modal)

在你看来

</modal>