Laravel + 慣性 + Vite 中的默認持久布局

Question

在之前在 laravel 應用程序中設置慣性的方法中，我可以從以下位置調整 `createInertiaApp function 中的解析屬性：

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

至

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

為了允許我手動傳遞要在頁面中使用的默認布局文件。

但是隨着 Vite 成為默認的資產捆綁器，並且根據文檔，我必須使用resolvePageComponent function ，它將import.meta.glob作為第二個參數來指示 Vite 要捆綁哪些文件。

這里的問題是從這個resolvePageComponent返回導入，所以我不能像通常從需要function那樣訪問默認的object。

所以我無法將默認布局文件附加到導入的頁面。

有沒有人能夠找到解決方法？

Answer 1

假設您像這樣導入了默認布局文件（請記住不要在導入中使用 @ ，因為只有相對路徑才能用於靜態分析）：

import DefaultLayoutFile from './Layouts/DefaultLayoutFile.vue'

您可以使用以下代碼來獲取使用 Inertia 和 Vite 的默認布局：

  resolve: (name) => {
    const page = resolvePageComponent(
      `./Pages/${name}.vue`,
      import.meta.glob("./Pages/**/*.vue")
    );
    page.then((module) => {
      module.default.layout = module.default.layout || DefaultLayoutFile;
    });
    return page;
  },

Answer 2

這對我使用帶有慣性預設的 vite 有效

import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/inertia-vue3'
import { resolvePageComponent } from 'vite-plugin-laravel/inertia'
import DefaultLayout from '@/views/layouts/default.vue'
import SimpleLayout from '@/views/layouts/simple.vue'

createInertiaApp({
    resolve: (name) => {
        const page = resolvePageComponent(
            name,
            import.meta.glob('../views/pages/**/*.vue'),
        );

        page.then((module) => {
            if (module.layout === undefined && module.__file.includes('/pages/auth/')) module.layout = SimpleLayout;
            if (module.layout === undefined) module.layout = DefaultLayout;
        });

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