Laravel+Inertia+Vite 配置默认持久布局问题咨询

在Laravel使用Webpack作为打包工具的阶段，给Inertia绑定全局默认布局只需要调整createInertiaApp函数的resolve属性即可。

初始默认的resolve写法：

{
   ...,
   resolve: name => import(`./Pages/${name}`),
   ...
}

修改为以下逻辑即可给未单独指定布局的页面自动绑定默认布局：

{
   ...,
   resolve: name => {
    const page = require(`./Pages/${name}`).default
    if(!page.layout) {
     page.layout = DefaultLayoutFile
    }
    return page
   },
   ...
}

Vite成为Laravel默认资源打包工具后，按照规范要求必须使用resolvePageComponent函数，第二个参数传入import.meta.glob告知Vite需要预扫描打包的文件范围。这里的常见卡点是：resolvePageComponent返回的是异步加载的模块对象，无法像require同步引入时直接访问组件的default属性修改layout配置，导致旧的布局绑定逻辑无法直接复用。

可行解决方法 #

直接在resolve回调中等待模块加载完成，再和旧逻辑一致处理默认布局即可，代码如下：

import { createInertiaApp } from '@inertiajs/vue3'
// 替换为你自己的默认布局文件路径
import DefaultLayout from './Layouts/DefaultLayout.vue'

createInertiaApp({
  // title等其他配置项保持原有写法不变
  resolve: async (name) => {
    // 加载对应页面组件，文件后缀根据你的技术栈调整：Vue用.vue，React用.jsx/.tsx
    const pageModule = await resolvePageComponent(
      `./Pages/${name}`,
      import.meta.glob('./Pages/**/*.vue')
    )

    // 未手动指定布局的页面，自动绑定全局默认布局
    if (!pageModule.default.layout) {
      pageModule.default.layout = DefaultLayout
    }

    return pageModule
  },
  // setup等其他配置项保持原有写法不变
})

注意事项 #

• import.meta.glob的通配规则要匹配实际目录结构：如果页面存在多级子目录，必须带**通配符，否则子目录下的页面不会被Vite扫描到
• 逻辑保留了原有判断：如果单个页面已经手动指定了layout属性，不会被默认布局覆盖
• 处理完的页面模块必须return，否则Inertia无法获取到组件会触发渲染错误

如果你使用的是高版本的Inertia Laravel Vite插件，resolvePageComponent还支持第三个参数作为组件处理回调，写法可以更精简：

resolve: (name) => resolvePageComponent(
  `./Pages/${name}`,
  import.meta.glob('./Pages/**/*.vue'),
  (module) => {
    if (!module.default.layout) module.default.layout = DefaultLayout
    return module
  }
)

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