vue.js - Vue3/Inertia 无法解析组件

Question

我有一个使用 VILT 堆栈(Vue、Inertia、Laravel、Tailwind)构建的应用程序。我有一些组件，如 cards可以在应用程序中的任何地方使用。因为我不想每次构建在某些目录中注册组件的函数时都手动导入这些组件:

/**
 * Register components from the ./components and ./components/core
 * directories. This way these components don't have to be imported
 * manually every time.
 *
 * @param {Vue instance} app
 */
function registerGlobalComponents (app) {
  const requireComponent = require.context(
    './components' || './components/core',
    true,
    /\.vue$/
  );

  for (const file of requireComponent.keys()) {
    const componentConfig = requireComponent(file);
    const name = file
      .replace(/index.js/, '')
      .replace(/^\.\//, '')
      .replace(/\.\w+$/, '');
    const componentName = upperFirst(camelCase(name));

    app.component(componentName,
      componentConfig.default || componentConfig);
  }
}

惯性应用程序的创建发生在同一个文件中:

/**
 * Create an Inertia app instance.
 */
createInertiaApp({
  resolve: (name) => import(`./Pages/${name}`),
  setup ({ el, app, props, plugin }) {
    const vueApp = createApp({ render: () => h(app, props) });

    /**
     * Mixin for showing notifications.
     */
    vueApp.mixin({
      data: function () {
        return {};
      },
      computed: {
        pageNotifications () {
          return this.$page.props.notification;
        }
      }
    });

    vueApp.use(plugin).mount(el);
    registerGlobalComponents(vueApp);
  }
});

因为我的 card组件在 /components/core 中目录我必须调用 template 中的组件像这样的标签:<core-card> content </core-card> .现在我的卡片完美地显示在页面上，正如您在图像中看到的那样。
但不知何故，我收到以下错误:

[Vue warn]: Failed to resolve component: core-card

对于通过此 registerGlobalComponents() 注册的所有其他组件，我收到此警告功能。当我的组件显示正确且工作正常时，为什么会收到此警告？

Answer 1

我收到此错误的问题是因为我在注册组件之前安装了应用程序。这导致组件显示在我的应用程序中，但仍然收到无法找到组件的警告。通过导入组件 之前 mount 这个问题就解决了。
我以前以这种方式导入了组件:

    createInertiaApp({
      resolve: (name) => import(`./Pages/${name}`),
      setup ({ el, app, props, plugin }) {
        const vueApp = createApp({ render: () => h(app, props) });
    
        /**
         * Mixin for showing notifications.
         */
        vueApp.mixin({
          data: function () {
            return {};
          },
          computed: {
            pageNotifications () {
              return this.$page.props.notification;
            }
          }
        });
    
        vueApp.use(plugin).mount(el);
        registerGlobalComponents(vueApp);
      }
    });

并更改了调用顺序plugin , registerGlobalComponents和 mount像这样的应用程序:

vueApp.use(plugin);
registerGlobalComponents(vueApp);
vueApp.mount(el);

感谢来自官方 Inertia Discord 的 Robert，我能够解决这个问题。如果他想索取赏金，我一定会给他积分。