Laravel＆＃x2B中的默认持久布局;惯性Vite

Question

在Laravel应用程序中设置惯性的一种方式中，我可以从“ createInertiaapp函数”中调整Resolve属性：从：

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

允许

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

我手动通过页面中使用的默认布局文件。

但是随着VITE成为默认资产捆绑器，并根据 a>，我必须使用ResolvePageComponent功能import.meta.glob作为第二个参数，以指示VITE要捆绑的文件。

问题是从此resolvePageComponent返回导入，因此我无法像我通常从requient函数中访问默认对象一样访问默认对象。

因此，我无法将默认布局文件附加到导入页面上。

有人能为此找到解决方法吗？

Answer 1

假设您类似地导入默认布局文件（请记住，请不要再在导入中使用 @，因为仅出于静态分析原因相对路径起作用）：

从'./ layouts/defaultlayoutfile.vue.vue'

'使用以下代码使默认布局与惯性和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;
  },

[UPDATE 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 root，您可以从任何地方动态导入组件：

例如 从'@/layouts/layouttop.vue'导入layouttop
现在将指向
/resources/js/layouts/layouttop.vue

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

Answer 2

等待可接受的答案的版本

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

Answer 3

对于laravel和vue3.js和intertia和vite> vite setup（laravel9 ）代码>及以上）

转到资源\ JS \ app.js

import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/vue3'

createInertiaApp({
  resolve: name => {
    const pages = import.meta.glob('./Pages/**/*.vue', { eager: true })
    return pages[`./Pages/${name}.vue`]
  },
  setup({ el, App, props, plugin }) {
    createApp({ render: () => h(App, props) })
      .use(plugin)
      .mount(el)
  },
})

更改为

import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/vue3'

#import your default layout.vue,@~resources\js
import Layout from '@/Layouts/Front/Layout.vue'

createInertiaApp({
  resolve: name => {
    const pages = import.meta.glob('./Pages/**/*.vue', { eager: true })

    #New code added
    let page = pages[`./Pages/${name}.vue`].default
    page.layout=Layout;
    return pages[`./Pages/${name}.vue`]
  },
  setup({ el, App, props, plugin }) {
    createApp({ render: () => h(App, props) })
      .use(plugin)
      .mount(el)
  },
})

laravel和vue3.js和inertia和webpack setup（laravel8及以下）

转到Resources \ JS \ app.js

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

更改为

#import your default layout.vue
import Layout from './Layouts/Front/Layout.vue'
createInertiaApp({
  resolve: name => {
  let page=require(`./Pages/${name}`).default;
    page.layout=Layout;
    return page;
 },
})

Answer 4

@ResidualFlash添加条件也有效：

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

Answer 5

使用 vite with interertia prestia

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'
import UserLayout from '@/views/layouts/user.vue'

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

        page.then((module) => {
            if (name.startsWith('auth.')) module.layout = SimpleLayout;
            if (name.startsWith('user.')) module.layout = [DefaultLayout, UserLayout];
        });

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