Открыты все маршруты Laravel. Как переместить его в app.js или, если возможно, минимизировать

Я использую Ziggy для своих проектов Laravel, Vue.js и Inertia js. В исходном коде страницы просмотра я четко вижу все маршруты 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>

Есть ли способ переместить этот объект Ziggy в app.js или сделать его менее очевидным? Основываясь на документации Ziggy и найденном здесь ответе, я пытаюсь импортировать его в app.js, но это не работает.

Uncaught TypeError: невозможно прочитать свойство «prototype» неопределенного значения в Object.inherits (app.js: 124712) в Object. (app.js: 68991) в Object ../ node_modules / irc / lib / irc.js (app.js: 69342) в webpack_require (app.js: 64) в Object ../ node_modules /ziggy/index.js (app.js: 140181) в webpack_require (app.js: 64) в Module ../ resources / js / app.js (app.js: 141504) в < strong> webpack_require (app.js: 64) в Object.0 (app.js: 142081) в 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 в Login.vue

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


person Seyid    schedule 12.02.2021    source источник
comment
могу я спросить, почему? Так или иначе, ваш код javascript должен будет знать маршруты, поэтому он все равно будет открыт   -  person Flame    schedule 17.02.2021
comment
Но их нет хотя бы в html.   -  person Seyid    schedule 17.02.2021
comment
основываясь на принятых ответах и ​​удалив `` Vue.mixin ({methods: {route: window.route}}) ``, он работает   -  person Seyid    schedule 20.02.2021


Ответы (2)


Если вы не используете 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';
person FightInGlory    schedule 12.02.2021
comment
Приложение не монтируется из-за маршрута импорта из ziggy; Uncaught TypeError: невозможно прочитать свойство 'prototype' undefined в Object.inherits (app.js: 124712) в Object. ‹Anonymous› (app.js: 68991) в Object ../ node_modules / irc / lib / irc.js ( app.js: 69342) в webpack_require (app.js: 64) в Object ../ node_modules / ziggy / index.js (app.js: 140181) в webpack_require (app.js: 64) в Module ../ resources / js / app.js (app.js: 141504) в webpack_require (app.js: 64) в Object.0 (app.js : 142081) в webpack_require (app.js: 64) - person Seyid; 15.02.2021
comment
Вы изменили путь на этой линии? импортировать {Ziggy} из './ziggy'; Или добавлен псевдоним для webpack? - person FightInGlory; 15.02.2021
comment
Нет, ничего не изменилось, я копирую приведенную выше документацию по ответу / письму как есть. - person Seyid; 15.02.2021
comment
Я изменил свой ответ, пожалуйста, проверьте - person FightInGlory; 15.02.2021

Сопровождающий Зигги здесь. Ответ 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, может быть полезно создать глобальный миксин, чтобы вам не приходилось каждый раз передавать Ziggy в качестве 4-го аргумента. Пример того, как это сделать, можно найти в документации.

Если это по-прежнему не работает, отправьте сообщение о проблеме с подробным объяснением вашей настройки!

person bakerkretzmar    schedule 15.02.2021
comment
Я создаю проблему, к вашему сведению, деталь добавлена ​​в вопрос. - person Seyid; 17.02.2021
comment
@bakerkretzmar Я получаю ошибку TypeError: this.route не является функцией. Какие-нибудь советы? - person oluwatyson; 25.04.2021
comment
TypeError: невозможно вызвать класс как функцию - это еще одна ошибка, которую я получаю. Что я делаю неправильно? - person oluwatyson; 25.04.2021
comment
@oluwatyson для TypeError убедитесь, что вы делаете функцию маршрута доступной во всех ваших компонентах Vue с помощью миксина, такого как Vue.mixin({ methods: { route } }). Вы используете Ziggy v1? Не стесняйтесь сообщать о проблеме в репо, и мы можем рассмотреть ее поближе! github.com/tighten/ziggy/issues - person bakerkretzmar; 26.04.2021