问题:所有 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 中导入它,但它不起作用。

未捕获的类型错误:无法读取 Object.inherits (app.js:124712) 处未定义的属性“原型”。 (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)

________________________ ___设置 _____________________\ _________________

//后端

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

解答

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