在laravel 8 vue3惯性js上设置ziggy后，app.blade.php中无法识别@route答案

【问题标题】：@route is not recognized in app.blade.php after setting up ziggy on laravel 8 vue3 inertiajs在laravel 8 vue3惯性js上设置ziggy后，app.blade.php中无法识别@route
【发布时间】：2021-11-06 15:14:45
【问题描述】：

即使在设置 Ziggy 并运行 npm run watch 和/或 npm run production 之后，@route 指令仍保持原样并被视为普通字符串。

<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 演示应用程序的源代码），但由于某种原因，它仍然保持原样。

这是我的代码：

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 指令

感谢您的帮助！

【问题讨论】：

标签： laravel laravel-8 vuejs3 inertiajs ziggy

【解决方案1】：

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

【讨论】：