Laravel Jetstream Vue混合路线

Question

在安装程序使用Jetstream选项创建的新Laravel项目中，resources/js/app.js有一行内容如下：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中找不到会导致这种情况的差异。这是从哪里导入或包含的，以便我可以检查它在升级中是否正确完成？

Answer 1

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

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

Answer 2

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

步骤1命令行：

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

步骤2：修改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路由器路由。。。我想我有一个问题需要解决，但这是的另一个问题