Laravel+InertiaJS+Vue3+Vite环境下dev与build无法同时正常工作问题

问题根源 #

两种配置的核心矛盾在于页面加载方式与Vite打包机制的不匹配：

• 用import.meta.glob('./Pages/**/*.vue', {eager: true})同步导入所有页面：dev时热更新正常，但build时Vite不会生成独立的页面chunk，Inertia无法在manifest中找到对应页面路径，触发500错误。
• 用resolvePageComponent搭配then异步设置布局：build时能正确生成chunk，但dev时异步回调无法被热更新机制追踪，导致实时编译失效。

兼容dev与build的解决方案 #

使用async/await改写resolve函数，结合Inertia提供的resolvePageComponent，同时保证布局设置的同步性：

import { createInertiaApp } from '@inertiajs/vue3';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import AuthenticatedLayout from './Layouts/AuthenticatedLayout.vue';
import { appName } from './app-name';

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: async name => {
        const page = await resolvePageComponent(
            `./Pages/${name}.vue`,
            import.meta.glob('./Pages/**/*.vue')
        );
        page.default.layout ??= AuthenticatedLayout;
        return page;
    },
    // 其他配置（如setup、render等）
    // [...]
});

验证步骤 #

1. 将上述代码替换到resources/js/app.js中
2. 执行npm run dev：修改页面或布局内容，确认热更新实时生效
3. 执行npm run build：构建完成后访问任意页面，确认500错误消失

关键说明 #

• resolvePageComponent是Laravel Vite插件提供的工具函数，自动适配dev（热更新）和build（chunk打包）两种模式
• 用async/await确保布局设置在页面组件加载完成后同步执行，避免异步回调导致的热更新失效
• 保持Vite默认的lazy加载机制，不要手动设置eager: true，build时会自动生成独立的页面chunk，Inertia能正确解析manifest路径

内容的提问来源于stack exchange，提问作者Stéphane