README

一个 Inertia.js 服务器端适配器，用于 PHP Mako 框架。

安装

安装 composer 和 npm 包
```
composer require inventor96/inertia-mako
npm install @inertiajs/inertia @inertiajs/vue3 @vitejs/plugin-vue laravel-vite-plugin vite vue
```
是的，Laravel Vite 插件是有意为之的。我们本来可以自己创建一个，但那样基本上是在重写轮子。注意，稍后运行 npm run dev 时，Laravel 插件将报告 APP_URL 为未定义，但这对我们来说没问题。

设置其他 npm 配置： package.json

{
    "private": true,
    "type": "module",
    "scripts": {
        "dev": "vite",
        "build": "vite build",
        "serve": "vite preview"
    },
    "dependencies": {
        ...
    }
}

创建 vite 配置： vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        laravel({
            input: 'app/resources/js/app.js',
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    resolve: {
        alias: {
            '@': 'app/resources/js',
        },
    },
});

创建 JS 应用文件： app/resources/js/app.js

import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/vue3'
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers'

createInertiaApp({
    resolve: (name) => resolvePageComponent(`../views/Pages/${name}.vue`, import.meta.glob('../views/Pages/**/*.vue')),
    setup({ el, App, props, plugin }) {
        createApp({ render: () => h(App, props) })
            .use(plugin)
            .mount(el)
    },
})

在 Mako 中启用该包
app/config/application.php:

[
    'packages' => [
        'web' => [
            inventor96\Inertia\InertiaPackage::class,
        ],
    ],
];

注册中间件： app/http/routing/middleware.php

$dispatcher->registerGlobalMiddleware(inventor96\Inertia\InertiaMiddleware::class);

配置

如果您想覆盖默认配置，请在 app/config/packages/inertia/inertia.php 中创建一个新文件。

以下配置项及其默认值如下

<?php
return [
    /**
     * The view to use when rendering the full HTML page
     * for the initial response to the browser.
     */
    'html_template' => 'inertia::default',

    /**
     * The initial title for the full HTML page.
     */
    'title' => 'Loading...',
];

对于 vite 特定配置，在同一目录中创建一个 vite.php 配置文件。

<?php
return [
    /**
     * The path to the manifest file generated by Vite.
     * Only needed if you change the default path in Vite,
     * otherwise the key should be omitted entirely.
     */
    //'manifest' => null,

    /**
     * The path to the hot module replacement file generated
     * by Vite. Only needed if you change the default path in
     * Vite, otherwise the key should be omitted entirely.
     */
    //'hot_file' => null,

    /**
     * The base path for the Vite assets. Should match the
     * `base` option in your Vite configuration, but could
     * also point to a CDN or other asset server, if you are
     * serving assets from a different domain.
     */
    'base_path' => '/',
];

使用自定义 `html_template`

您可能需要在项目的某个阶段创建自己的 html_template。从 InertiaRenderer 中传递了 3 个值到模板中。您可以使用内置的 Mako 功能来添加这些值。

$title：只是上面 title 配置变量的透传。这是可选的。
$page：JSON Inertia 页面对象。您必须在某个地方使用它才能使 Inertia 工作。
$tags：Vite 资源的 HTML 标签。它包含三个字符串属性：js、css 和 preload。您必须至少在某个地方使用 js 属性才能使 Inertia 工作。

以下是此 inertia-mako 包中使用的默认页面

<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <title>{{ $title }}</title>
    {{ raw:$tags->preload }}
    {{ raw:$tags->css }}
    {{ raw:$tags->js }}
</head>
<body>
    <div id="app" data-page='{{ raw:$page }}'></div>
</body>
</html>

编写您的应用

这个 InertiaJS 适配器的想法是利用现有的 Mako 框架功能。因此，它被构建为将 Vue 文件组织在 app/resources/views/ 下。页面应该在 Pages/ 文件夹下。例如

app/
    resources/
        views/
            Components/
                ...
            Layouts/
                ...
            Pages/
                Welcome.vue
                ...

在您的路由或控制器中，您可以使用 Mako 的 ViewFactory::render() 方法来处理 InertiaJS 响应，在路径前加上 Pages/ 前缀。例如 $view->render('Pages/Welcome')。

Inertia 类已在 Mako 依赖注入容器中注册为 inertia 键。因此，作为使用带路径前缀的 ViewFactory 的替代方案，您可以调用 $this->inertia->render('Welcome')。这只是一个围绕原始方法的包装，所以实际上并没有什么区别。这只是个人偏好的原因。

资产版本化

Inertia.js 具有用于减轻客户端缓存过时的资产版本化功能。要指示服务器端版本，在 app/config/packages/inertia/version.php 中创建一个文件，如下所示

<?php
return ['1.0'];

您可以让该文件执行您需要的任何操作，但唯一的要求是它最终返回一个包含单个字符串值的数组。

inventor96 / inertia-mako

维护者

详细信息

README

安装

配置

使用自定义 `html_template`

编写您的应用

资产版本化

inventor96 / inertia-mako

维护者

详细信息

README

安装

配置

使用自定义 html_template

编写您的应用

资产版本化

使用自定义 `html_template`