在 laravel 8 vue3 inertiajs 上设置 ziggy 后，@route 在 app.blade.php 中无法识别

Question

即使在设置了 Ziggy 和运行 npm run watch and/or npm run production.[= 之后，@route 指令仍然像普通字符串一样被处理25=]

<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <link href="/css/app.css" rel="stylesheet" />
    @routes
    <script src="/js/app.js" defer></script>
</head>

据推测，@routes 应该转换为 <?php echo app('Tightenco\Ziggy\BladeRouteGenerator')->generate(); ?>（基于在 https://inertiajs.com/demo-application 下载的 InertiaJS 演示应用程序的源代码），但由于某种原因它仍然像 thta。

这是我的代码：

webpack.mix.js

const mix = require('laravel-mix');

const path = require('path');

mix
    .js('resources/js/app.js', 'public/js').vue()
    .sass('resources/css/app.scss', 'public/css')
    .webpackConfig(
    {
        output: {
            chunkFilename: 'js/[name].js?id=[chunkhash]',
        }
    }
).alias({
    ziggy: path.resolve('vendor/tightenco/ziggy/dist/vue'),
});

app.blade.php

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <link href="{{ mix('/css/app.css') }}" rel="stylesheet" />
    @routes
    <script src="{{ mix('/js/app.js') }}" defer></script>
</head>
<body>

@inertia
</body>
</html>

app.js

import {createApp, h} from 'vue'
import {createInertiaApp} from '@inertiajs/inertia-vue3'
import {InertiaProgress} from '@inertiajs/progress'
import { ZiggyVue } from 'ziggy'
import { Ziggy } from './ziggy'

InertiaProgress.init()
createInertiaApp({
    resolve: name => require(`./Pages/${name}`),
    setup({el, App, props, plugin}) {
        const app = createApp({render: () => h(App, props)})
            .use(plugin, ZiggyVue, Ziggy)
            .mixin({ methods: { route: window.route } });

        app.config.globalProperties.$route = (a, b = {}) => {
            const token = new URLSearchParams(window.location.search).get('t');

            b["t"] = token;
            route(a, b)
        };
        // app.config.globalProperties.$token = token;
        app.mount(el);
    },
})

composer.json

{
    "name": "laravel/laravel",
    "type": "project",
    "description": "The Laravel Framework.",
    "keywords": [
        "framework",
        "laravel"
    ],
    "license": "MIT",
    "require": {
        "php": "^7.3|^8.0",
        "fruitcake/laravel-cors": "^2.0",
        "guzzlehttp/guzzle": "^7.0.1",
        "inertiajs/inertia-laravel": "^0.4.4",
        "laravel/framework": "^8.54",
        "laravel/sanctum": "^2.11",
        "laravel/tinker": "^2.5",
        "tightenco/ziggy": "^1.4"
    },
    "require-dev": {
        "facade/ignition": "^2.5",
        "fakerphp/faker": "^1.9.1",
        "laravel/sail": "^1.0.1",
        "mockery/mockery": "^1.4.2",
        "nunomaduro/collision": "^5.0",
        "phpunit/phpunit": "^9.3.3"
    },
    "autoload": {
        "psr-4": {
            "App\": "app/",
            "Database\Factories\": "database/factories/",
            "Database\Seeders\": "database/seeders/"
        }
    },
    "autoload-dev": {
        "psr-4": {
            "Tests\": "tests/"
        }
    },
    "scripts": {
        "post-autoload-dump": [
            "Illuminate\Foundation\ComposerScripts::postAutoloadDump",
            "@php artisan package:discover --ansi"
        ],
        "post-update-cmd": [
            "@php artisan vendor:publish --tag=laravel-assets --ansi"
        ],
        "post-root-package-install": [
            "@php -r \"file_exists('.env') || copy('.env.example', '.env');\""
        ],
        "post-create-project-cmd": [
            "@php artisan key:generate --ansi"
        ]
    },
    "extra": {
        "laravel": {
            "dont-discover": []
        }
    },
    "config": {
        "optimize-autoloader": true,
        "preferred-install": "dist",
        "sort-packages": true
    },
    "minimum-stability": "dev",
    "prefer-stable": true
}

我按照 https://inertiajs.com/server-side-setup 中的步骤设置中间件并更改默认值 app.blade.php 以包含 @inertia 指令

感谢您的帮助！

Answer 1

好的，所以我检查了 InertiaJS 的示例 CRM 项目并查看了生成的 app.blade.php 文件，@routes 被替换为 <?php echo app('Tightenco\Ziggy\BladeRouteGenerator')->generate(); ?>。我用它替换了 @routes 并且 route() 函数现在可以工作了。如果有更好的方法，我将不胜感激。

在 laravel 8 vue3 inertiajs 上设置 ziggy 后，@route 在 app.blade.php 中无法识别

@route is not recognized in app.blade.php after setting up ziggy on laravel 8 vue3 inertiajs

inertiajs

laravel

vuejs3

laravel-8

ziggy