Vue 3 Inertia 动态组件解析失败，Votes组件未加载求助

算力阿峰

2026-8-16

Inertia动态解析组件失败（Votes组件未加载）的排查方案

可能的问题及解决办法

1. 组件路径不匹配

import.meta.glob('../views/pages/*.vue')只会匹配pages目录下直接的.vue文件：

检查Votes.vue是否在../views/pages/目录下，文件名大小写是否完全一致（比如不能是votes.vue或VOTES.vue）
如果组件在子目录（比如pages/votes/Votes.vue），把glob模式改成../views/pages/**/*.vue来匹配所有子目录下的组件

2. withVite参数不匹配

withVite的第二个参数需要是glob对象中的完整路径键，而不是单纯的组件名：

const pages = import.meta.glob('../views/pages/*.vue');

createInertiaApp({
  resolve: name => withVite(pages, `../views/pages/${name}.vue`),
  setup({ el, app, props, plugin }) {
    createApp({ render: () => h(app, props) })
      .use(plugin)
      .mount(el)
  },
})

或者直接手动获取并调用glob返回的模块函数：

const pages = import.meta.glob('../views/pages/*.vue');

createInertiaApp({
  resolve: name => {
    const componentPath = `../views/pages/${name}.vue`;
    // 先确认路径存在，避免报错
    if (!pages[componentPath]) {
      console.error(`组件路径不存在：${componentPath}`);
      return Promise.reject(new Error(`Component not found: ${name}`));
    }
    return pages[componentPath]();
  },
  // ...其他配置
})