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]：无法解析组件：核心卡

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

Answer 1

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

我之前是这样导入组件的：

    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，我得以解决这个问题。如果他想领取赏金，我一定会给他积分。