Vue+Inertia.js运行npm run dev报await语法错误，页面不显示求解决

你的错误有两个核心原因：

1. resolve 函数未声明为 async，但内部使用了 await 关键字，这是语法错误的直接来源。
2. 你使用了 import.meta.glob 的 eager: true 选项，此时返回的是已同步加载完成的模块，而非异步加载函数，不需要调用 () 和 await。

修正后的代码（保持eager模式） #

import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/vue3'
import MainLayout from './Layouts/MainLayout.vue3'

createInertiaApp({
  resolve: name => {
    const pages = import.meta.glob('./Pages/**/*.vue', { eager: true })
    // eager模式下直接取模块，无需await和函数调用
    const page = pages[`./Pages/${name}.vue`]
    page.default.layout = page.default.layout || MainLayout

    return page
  },
  setup({ el, App, props, plugin }) {
    createApp({ render: () => h(App, props) })
      .use(plugin)
      .mount(el)
  },
})

如果你想使用懒加载（去掉eager: true） #

如果不需要预加载所有页面，可改为异步懒加载模式，此时需要把resolve声明为async函数：

import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/vue3'
import MainLayout from './Layouts/MainLayout.vue3'

createInertiaApp({
  // 声明resolve为async函数
  resolve: async name => {
    const pages = import.meta.glob('./Pages/**/*.vue')
    // 非eager模式下，pages的值是异步加载函数，需要await调用
    const page = await pages[`./Pages/${name}.vue`]()
    page.default.layout = page.default.layout || MainLayout

    return page
  },
  setup({ el, App, props, plugin }) {
    createApp({ render: () => h(App, props) })
      .use(plugin)
      .mount(el)
  },
})

额外注意 #

• 检查你的MainLayout文件后缀是否正确：代码里写的是.vue3，通常Vue组件后缀是.vue，如果文件名确实是.vue3则没问题，否则需要修正。

内容的提问来源于stack exchange，提问作者Michelle Tan