Laravel+Vite+Inertia.js无法导入pages子目录页面求助

1. Vite动态导入的静态分析限制：Vite编译时需要静态识别待打包文件，当使用import(./pages/${name}.vue)这类全变量拼接的动态导入时，Vite无法预知所有可能的文件路径（尤其是子目录下的文件），导致auth/Register.vue未被打包进最终产物，运行时出现文件找不到的错误。
2. 路径匹配的隐性问题：虽然手动拼接的路径逻辑正确，但Vite的模块解析器无法通过变量路径推断出需要包含子目录中的文件，只有明确的静态路径或glob匹配才能让Vite正确扫描并打包这些文件。

方案一：使用Vite Glob导入预加载所有页面（推荐） #

通过import.meta.glob让Vite提前扫描pages目录下所有子目录的.vue文件，确保所有页面都被打包，同时在resolve函数中匹配对应的文件：

修改app.js代码：

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

// 预加载pages目录下所有.vue文件，支持子目录
const pages = import.meta.glob('./pages/**/*.vue');

createInertiaApp({
    resolve: name => {
        // 适配后端传递的路径格式（兼容斜杠/点分隔两种写法）
        const filePath = `./pages/${name.replace('.', '/')}.vue`;
        return pages[filePath]();
    },
    setup({el, app, props, plugin}) {
        createApp({render: () => h(app, props)})
            .use(plugin)
            .mount(el)
    }
});

方案二：优化动态导入的静态前缀（简单适配） #

如果不想用glob，也可以调整resolve函数的写法，给Vite提供足够的静态路径信息，让它能识别到子目录：

修改app.js中的resolve函数：

// 原代码
resolve: name => import(`./pages/${name}.vue`),
// 替换为
resolve: name => import(`./pages/${name.split('/').join('/')}.vue`),

这种写法明确告诉Vite路径的静态前缀是./pages/，变量部分是具体的文件路径，但兼容性不如glob导入，页面目录结构复杂时可能仍会出问题。

额外检查项 #

• 确认resources/js/pages/auth/Register.vue文件存在，且文件名大小写与后端传递的auth/Register完全一致（Linux/macOS系统区分文件名大小写）。
• 清理Vite缓存：执行npm run dev --force强制重新编译所有文件，避免缓存导致的问题。

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