所有 Laravel 路由均已公开。如何将其移至 app.js 或尽可能缩小
我正在为我的 Laravel、Vue.js 和 Inertia js 项目使用 Ziggy。在查看页面源代码时，我可以清楚地看到所有 Laravel 路由。
<script type="text/javascript">
const Ziggy = {"url":"http:\/\/127.0.0.1:8787","port":8787,"defaults":{},"routes":
......
"sup_finish_tt_order":{"uri":"front\/finishorder","methods":["POST"]},"assign__tt":{"uri":"front\/assigntt","methods":["POST"]},"technicians":{"uri":"technicians","methods":["GET","HEAD"]},"change-password":{"uri":"change-password","methods":["GET","HEAD"]},"reset.password":{"uri":"c
----------
</script>
有没有办法在 app.js 中重新定位这个 Ziggy 对象或使其不那么显眼？根据 Ziggy 文档和此处尝试的答案，我尝试将其导入 app.js，但不起作用。
Uncaught TypeError: Cannot read property 'prototype' of undefined at Object.inherits (app.js:124712) at Object. (app.js:68991) at Object../node_modules/irc/lib/irc.js (app.js:69342) at webpack_require (app.js:64) at Object../node_modules/ziggy/index.js (app.js:140181) at webpack_require (app.js:64) at Module../resources/js/app.js (app.js:141504) at webpack_require (app.js:64) at Object.0 (app.js:142081) at webpack_require (app.js:64)
___________________________设置 ______________________________________
//后端
$ php artisan ziggy:generate
File generated!
// 示例 /resources/js/ziggy.js 文件
const Ziggy = {"url":"http:\/\/127.0.0.1:8787","port":8787,"defaults":{},"routes":{"debugbar.openhandler":{"uri":"_debugbar\/open" /*..... All named routes as expeted */
if (typeof window !== 'undefined' && typeof window.Ziggy !== 'undefined') {
for (let name in window.Ziggy.routes) {
Ziggy.routes[name] = window.Ziggy.routes[name];
}
}
export { Ziggy };
// /resources/js/app.js
require('./bootstrap')
import Vue from 'vue'
import VueMeta from 'vue-meta'
import PortalVue from 'portal-vue'
import { App, plugin } from '@inertiajs/inertia-vue'
import { InertiaProgress } from '@inertiajs/progress/src'
// Ziggy start here
import route from 'ziggy';
import { Ziggy } from './ziggy';
Vue.mixin({
methods: {
route: (name, params, absolute, config = Ziggy) => route(name, params, absolute, config),
},
});
// ziggy end here
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
Vue.use(BootstrapVue)
Vue.use(IconsPlugin)
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import { mixins } from 'vue-chartjs'
import TreeBrowser from './Pages/globalComponents/TreeBrowser.vue'
//Vue.config.productionTip = false
Vue.mixin({ methods: { route: window.route } })
Vue.use(plugin)
Vue.use(PortalVue)
Vue.use(VueMeta)
Vue.component('TreeBrowser', TreeBrowser)
InertiaProgress.init()
let app = document.getElementById('app')
new Vue({
metaInfo: {
titleTemplate: (title) => title ? `${title} - FNV` : 'FNV yours'
},
render: h => h(App, {
props: {
initialPage: JSON.parse(app.dataset.page),
resolveComponent: name =>
import (`./Pages/${name}`).then(module => module.default),
},
}),
}).$mount(app)
// /webpack.mix.js
const mix = require('laravel-mix');
const path = require('path');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
mix.webpackConfig({
resolve: {
alias: {
ziggy: path.resolve('vendor/tightenco/ziggy/dist'),
},
},
});
ziggy ex 的使用
登录.vue
this.$inertia.post(this.route('login.attempt'), data, {
onStart: () => this.sending = true,
onFinish: () => this.sending = false,
})
```
Ziggy 的维护者在这里。 FightInGlory 的答案 是正确的。
运行
php artisan ziggy:generate
。
然后，在您的
webpack.mix.js
文件中：
const path = require('path');
// Mix v6
mix.alias({
ziggy: path.resolve('vendor/tightenco/ziggy/dist'),
});
// Or, Mix v5
mix.webpackConfig({
resolve: {
alias: {
ziggy: path.resolve('vendor/tightenco/ziggy/dist'),
},
},
});
然后，在您想要使用 Ziggy 的文件中：
import route from 'ziggy';
// Change './ziggy' to the relative path to the file generated above, usually resources/js/ziggy.js
import { Ziggy } from './ziggy';
// ...
route('posts.show', 1, undefined, Ziggy);
如果您使用的是 Vue，创建一个全局 mixin 会很有帮助，这样您就不需要每次都将
Ziggy
作为第 4 个参数传入。
在文档中
有一个关于如何设置的示例。
如果仍然不起作用，请随时提交问题并详细说明您的设置！
如果您不使用 Blade，或者不想使用 @routes 指令，Ziggy 提供了一个 artisan 命令来将其配置和路由输出到文件：php artisan ziggy:generate
import route from 'ziggy';
import { Ziggy } from './ziggy';
Vue.mixin({
methods: {
route: (name, params, absolute, config = Ziggy) => route(name, params, absolute, config),
},
});
您可以选择创建一个 webpack 别名，以便更轻松地导入 Ziggy 的核心源文件
// webpack.mix.js
// Mix v6
const path = require('path');
mix.alias({
ziggy: path.resolve('vendor/tightenco/ziggy/dist'),
});
// Mix v5
const path = require('path');
mix.webpackConfig({
resolve: {
alias: {
ziggy: path.resolve('vendor/tightenco/ziggy/dist'),
},
},
});
这意味着您应该在此处更改路径“.ziggy”
import { Ziggy } from './ziggy';
注释或删除 Middleware/HandleInertiaRequests.php 上的 ziggy 数组，如下所示：
public function share(Request $request)
{
return array_merge(parent::share($request), [
'auth' => [
'user' => $request->user(),
],
// 'ziggy' => function () {
// return (new Ziggy)->toArray();
// },
]);
}