Блог

У меня есть приложение, построенное с использованием стека VILT (Vue, Инерция, Laravel, Попутный ветер). У меня есть некоторые компоненты, подобные 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);
  }
}
 

Создание приложения inertion происходит в том же файле:

 /**
 * 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() функции. Почему я получаю это предупреждение, когда мои компоненты отображаются правильно и работают нормально?

Проблема, из-за которой я получил эту ошибку, заключалась в том, что я монтировал приложение до того, как зарегистрировал компоненты. Это привело к тому, что компоненты отображались в моем приложении, но все равно появлялось предупреждение о том, что компонент не может быть найден. Импортировав компоненты перед монтированием, эта проблема была решена.

Ранее я импортировал компоненты таким образом:

     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);
 

Я смог решить эту проблему благодаря Роберту с официального сайта Discord. Если он захочет претендовать на награду, я обязательно присужу ему очки.