集成Inertia+Vue+Laravel后页面加载失败，报Uncaught (in promise) TypeError错误

算力阿峰

2026-7-23

问题解决：Inertia+Vue3+Laravel页面加载报错Uncaught (in promise) TypeError

错误原因

报错核心是resolve函数中页面路径匹配失败，且未正确获取Vue组件的默认导出。当控制器返回Index/Index时，代码尝试匹配./Pages/Index/Index.vue，但当前写法存在两个问题：

未判断匹配到的页面模块是否存在，路径不匹配时会直接调用undefined触发报错
未提取组件的default导出（Vue组件默认采用默认导出方式）

修复方案

方案1：直接动态导入（推荐）

修改app.js中的resolve函数，通过动态导入直接获取组件：

import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/inertia-vue3'

createInertiaApp({
  resolve: async (name) => {
    // 动态导入对应页面，直接提取default导出
    const module = await import(`./Pages/${name}.vue`)
    return module.default
  },
  setup({ el, App, props, plugin }) {
    createApp({ render: () => h(App, props) })
      .use(plugin)
      .mount(el)
  },
})

方案2：修正import.meta.glob的使用

如果坚持使用import.meta.glob，需增加存在性检查并正确提取默认导出：

import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/inertia-vue3'

createInertiaApp({
  resolve: async (name) => {
    const pages = import.meta.glob('./Pages/**/*.vue')
    // 获取对应页面的导入函数
    const pageImport = pages[`./Pages/${name}.vue`]
    // 检查模块是否存在，避免调用undefined
    if (!pageImport) {
      throw new Error(`页面 ${name} 未找到，请检查文件路径`)
    }
    // 执行导入并提取default导出
    const module = await pageImport()
    return module.default
  },
  setup({ el, App, props, plugin }) {
    createApp({ render: () => h(App, props) })
      .use(plugin)
      .mount(el)
  },
})