Laravel Jetstream Vue mixin route

Posted 2023-02-22

【中文标题】Laravel Jetstream Vue mixin route

【英文标题】：

【发布时间】：2021-02-03 06:42:56

【问题描述】：

在安装程序使用 Jetstream 选项 resources/js/app.js 创建的新 Laravel 项目中，有一行内容如下： Vue.mixin( methods: route );

phpStorm 报告 route 是一个未解析的变量或类型。发生这种情况，PHPStorm 可能是错误的。在新创建的应用程序中，这不会导致错误。

但是，当我将现有项目升级到 Laravel 8.10.0 并通过 composer 安装 Jetstream 时，这确实会导致和问题。运行这个npm run dev的时候不会报错，但是浏览器会报app.js:44258 Uncaught ReferenceError: route is not defined。

我发现 app.js 或 bootstrap.js 没有任何区别会导致这种情况。这在哪里导入或包含，以便我可以检查它是否在我的升级中正确完成？

【参考方案1】：

新创建的应用程序和更新都创建了一个包含 @routes 指令的 Blade 模板。在比较现有文件时，我没有注意到这种差异。

这可以通过在加载主脚本之前在刀片模板中包含@routes 指令来纠正，如installation guide for ziggy 中所述。

【参考方案2】：

在 ToothlessRebel 的建议下，这就是我解决错误的方法：

第 1 步命令行：

composer require tightenco/ziggy
npm install ziggy-js
php artisan ziggy:generate "resources/js/ziggy.js"

第二步：修改 webpack.mix.js ：

mix.js('resources/js/app.js', 'public/js')
    ...
    .webpackConfig(require('./webpack.config'));

在 ./webpack.config 中：

const path = require('path');
module.exports = 
    resolve: 
        alias: 
            '@': path.resolve('resources/js'),
            ziggy: path.resolve('vendor/tightenco/ziggy/src/js/route.js'),
        ,
    ,
;

第 3 步：app.js：

import route from 'ziggy';
import 
    Ziggy
 from './ziggy';
...
Vue.mixin(
    methods: 
        route: (name, params, absolute) => route(name, params, absolute, Ziggy),
    ,
);
...
new Vue(
    el: "#app",
    render: (h) =>
        h(InertiaApp, 
            props: 
                initialPage: JSON.parse(app.dataset.page),
                resolveComponent: (name) => require(`./Pages/$name`).default,
            ,
        ),

);

最后是一个命令：npm run dev

所以，我的仪表板和所有 mixin/ziggy 路由都在工作... 不再是我的 vue-router 路由了……我想我有一个必须解决的问题，但这是另一个问题