Vue3/Inertia 无法解析组件

Posted 2023-02-22

【中文标题】Vue3/Inertia 无法解析组件

【英文标题】：Vue3/Inertia Failed to resolve component

【发布时间】：2021-09-06 19:26:19

【问题描述】：

我有一个使用 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 警告]：无法解析组件：核心卡

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

【问题讨论】：

仅供参考，有人在此处仅使用 import 语句手动执行此操作：Register vue component globally on inertia/vue instance - 您的通用实现可能有效，但静态方法是否给出相同的信息？

【参考方案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，我能够解决这个问题。如果他要索取赏金，我一定会给他积分。