Laravel/Vite/Inertiajs：子目录页面导入与默认布局适配问题

1. 用打包工具批量导入API替代*通配符 #

动态导入本身不支持*，但主流打包工具都提供了批量导入页面文件的方案，解决子目录遍历问题：

情况1：Vite项目 #

使用import.meta.glob批量匹配带扩展名的页面文件（支持子目录递归）：

// app.js 中批量导入所有页面组件
const pageModules = import.meta.glob('/src/pages/**/*.vue', { eager: true }); // 扩展名可按需改为jsx/js

// 转换为路由可用格式
const routes = Object.keys(pageModules).map(filePath => {
  // 提取路由路径：/src/pages/home.vue → /home；/src/pages/user/profile.vue → /user/profile
  const routePath = filePath.replace(/\/src\/pages/, '').replace(/\.\w+$/, '');
  return {
    path: routePath || '/', // 根目录文件对应路由/
    component: pageModules[filePath].default
  };
});

情况2：Webpack项目 #

使用require.context实现子目录批量导入：

// 批量读取pages目录下所有带指定扩展名的文件（第二个true表示遍历子目录）
const pageContext = require.context('./pages', true, /\.(vue|jsx|js)$/);
const routes = [];

pageContext.keys().forEach(fileKey => {
  // 转换路由路径：./home.vue → /home；./user/profile.jsx → /user/profile
  const routePath = fileKey.replace(/^\./, '').replace(/\.\w+$/, '');
  const component = pageContext(fileKey).default;
  routes.push({
    path: routePath || '/',
    component
  });
});

2. 自动注入默认布局，避免白屏/加载失败 #

给所有页面统一包裹默认布局，同时添加错误处理防止单个页面加载失败导致全局白屏：

// 导入默认布局组件
import DefaultLayout from './layouts/DefaultLayout.vue';

// 封装布局注入函数
function withLayout(Component) {
  return {
    render() {
      return (
        <DefaultLayout>
          <Component {...this.$props} />
        </DefaultLayout>
      );
    }
  };
}

// 给所有路由组件添加布局+错误捕获
routes.forEach(route => {
  // 同步组件直接包裹布局
  route.component = withLayout(route.component);

  // 如果是懒加载场景，用异步错误捕获
  // route.component = async () => {
  //   try {
  //     const comp = await route.component();
  //     return withLayout(comp.default);
  //   } catch (err) {
  //     console.error('页面加载失败:', err);
  //     return { render: () => <div>页面加载出错，请重试</div> };
  //   }
  // };
});

3. 排查文件不存在错误的关键点 #

• 确认批量导入的路径规则正确：比如是否覆盖了所有子目录，扩展名是否和实际文件一致
• 检查路由路径转换逻辑：确保子目录文件（如pages/user/login.vue）能正确转换为对应路由（/user/login）
• 开启打包工具debug模式（如Vite的--debug），查看实际导入的文件列表，确认没有漏选或错选文件

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