所有 Laravel 路线公开。如何将其移动到 app.js 或尽可能缩小

Question

我正在为我的 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)

___________________________Set向上______________________________________

//后端

$ 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'),
        },
    },
});

在 Login.vue

中使用 ziggy ex

this.$inertia.post(this.route('login.attempt'), data, {
        onStart: () => this.sending = true,
        onFinish: () => this.sending = false,
      })
    ```

Answer 1

如果您不使用 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';

Answer 2

这里是 Ziggy 的维护者。正确。

运行 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，创建一个全局混入会很有帮助，这样您就不需要每次都将 Ziggy 作为第 4 个参数传入。有一个如何设置的示例 in the docs。

如果还是不行，请随时提交问题并详细说明您的设置！

所有 Laravel 路线公开。如何将其移动到 app.js 或尽可能缩小

All Laravel routes exposed. How to move it to app.js or minify if possible

inertiajs

laravel

vue.js