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

envsm3lx 于 2023-03-19 发布在其他

关注(0)|答案(4)|浏览(134)

在前面设置laravel应用惯性的方法中，我可以调整'createInertiaApp函数中的resolve属性：

{
   ...,
   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函数那样访问默认对象。
所以我一直无法将默认布局文件附加到导入的页面。
有人能找到解决这个问题的方法吗？

laravel

来源：https://stackoverflow.com/questions/72864434/default-persistent-layout-in-laravel-inertia-vite

4条答案

按热度按时间

xdyibdwo1#

假设您像这样导入默认布局文件（记住不要在导入中使用@，因为只有相对路径才能用于静态分析）：
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年8月1日]

由于这仍在接收视图，我认为展示如何在Vite中导入@会很有用。
在vite.config.js中的导入项下需要path

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

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

赞(0）回复(0）举报 2023-03-19

q5iwbnjs2#

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

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

赞(0）回复(0）举报 2023-03-19

tv6aics13#

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

赞(0）回复(0）举报 2023-03-19

wqlqzqxt4#

这是我使用vite with inertia preset的结果

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

赞(0）回复(0）举报 2023-03-19

我来回答

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

4条答案

相关问题

热门标签

最新问答