Laravel + Inertia + Vite 中的默认持久布局

Question

在以前在 Laravel 应用程序中设置惯性的方法中，我可以调整 `createInertiaApp 函数中的解析属性：

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

到

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

允许我手动传递要在页面中使用的默认布局文件。

但随着 Vite 成为默认的资源捆绑器，并且根据文档，我必须使用一个resolvePageComponent函数，该函数接受import.meta.glob第二个参数来指示 Vite 要捆绑哪些文件。

这里的问题是导入从此返回resolvePageComponent，因此我无法像通常从 require 函数那样访问默认对象。

所以我无法将默认布局文件附加到导入的页面。

有人能找到解决方法吗？

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;
  },

[更新2022-08-01]

由于这仍在收到意见，我认为展示如何@在 Vite 中导入工作会很有用。

需要path低于您的进口vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
const path = require('path')

然后添加resolve到您的配置中：

export default defineConfig({
  resolve:{
    alias:{
      '@' : path.resolve(__dirname, './src')
    },
  },
})

现在@将指向您的 Laravel 根目录，您可以从任何地方动态导入组件：

例如 import LayoutTop from '@/Layouts/LayoutTop.vue' 现在将指向 /resources/js/Layouts/LayoutTop.vue

请记住，Vite.vue在导入 Vue SFC 文件时需要扩展名。

Answer 2

已接受答案的异步等待版本

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