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

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

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

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

Vue3/Inertia 解析组件失败

Vue3/Inertia Failed to resolve component

inertiajs

vue.js

vuejs3