带有 Laravel 的 Inertia 中的 Vue 组件似乎加载了两次

Question

使用带有 Inertia 和 Vue 项目的新创建的 Laravel，我有一个错误，它在我的 vue 组件中运行代码两次。

对于一个简单的测试演示，我有一个Test.vue ，带有这个代码

<template>
<div>
    TEST
</div>
</template>

<script>
export default {
    name: "Test",
    mounted() {
        console.log('test')
    }
}
</script>

<style scoped>

</style>

web.php 中的路线：

Route::get('/test', array(App\Http\Controllers\DashboardController::class, 'test'));

在 controller 中：

    public function test(): Response
    {
        return Inertia::render('Test');
    }

当我 go 到路由 /test 时，它在我的控制台上安装了两次“测试”。 在调用 API 等的更高级的组件中，也会调用它们两次。

我怀疑我的项目可能设置错误，在app.blade.php或app.js中，但无法弄清楚。

我按照https://inertiajs.com/server-side-setup和https://inertiajs.com/client-side-setup上的指南进行设置。

我的源代码在这里： https://github.com/ekstremedia/laravel-inertia

编辑：在我加载的第一个组件中，它似乎只回显了两次。 如果我在该组件中链接到另一个组件，并且 go 在那里，它不会加载两次。

Answer 1

我发现可以通过修改资源目录中的 app.js 文件来解决这个问题：

 import Vue from 'vue' import { App as InertiaApp, plugin as InertiaPlugin } from '@inertiajs/inertia-vue' Vue.use(InertiaPlugin) new Vue({ render: (h) => h(InertiaApp, { props: { initialPage: JSON.parse(app.dataset.page), resolveComponent: (name) => require(`./Pages/${name}`).default, }, }), }).$mount(app);

您的问题似乎在于您如何初始化惯性应用程序。