1

我刚刚开始使用 Laravel 8 构建一个 Web 应用程序。我注意到 Laravel 8 中发生了一些变化。我正在使用 Jetstream 和 Inertia 进行身份验证和管理仪表板。我正在尝试在控制器操作方法中呈现 Inertia Vue JS 组件。但它没有按预期工作。这是我到目前为止所做的。

我使用以下代码在 resources/js/Pages/MenuCategory/MenuCategoryList.vue 下创建了一个 Vue js 组件。

<template>
    <div>
        <h1>Menu Category List</h1>
    </div>
</template>

<script>
export default {
    name: "MenuCategoryList"
}
</script>

<style scoped>

</style>

然后在控制器中，我按如下方式渲染组件。

class MenuCategoryController extends Controller
{
    //
    public function index()
    {
        return Inertia::render('MenuCategory/MenuCategoryList');
    }
}

但它没有在浏览器中呈现并在控制台中引发以下错误。

[Vue warn]: Error in created hook: "Error: Cannot find module './MenuCategory/MenuCategoryList'"

found in

---> <Inertia>
       <Root>
warn @ app.js:28523
logError @ app.js:29782
globalHandleError @ app.js:29777
handleError @ app.js:29737
invokeWithErrorHandling @ app.js:29760
callHook @ app.js:32109
Vue._init @ app.js:32891
VueComponent @ app.js:33036
createComponentInstanceForVnode @ app.js:31179
init @ app.js:31010
createComponent @ app.js:33862
createElm @ app.js:33809
patch @ app.js:34398
Vue._update @ app.js:31835
updateComponent @ app.js:31956
get @ app.js:32367
Watcher @ app.js:32356
mountComponent @ app.js:31963
./node_modules/vue/dist/vue.common.dev.js.Vue.$mount @ app.js:36933
./node_modules/vue/dist/vue.common.dev.js.Vue.$mount @ app.js:39833
./resources/js/app.js @ app.js:42184
__webpack_require__ @ app.js:20
0 @ app.js:42227
__webpack_require__ @ app.js:20
(anonymous) @ app.js:84
(anonymous) @ app.js:87
app.js:29786 Error: Cannot find module './MenuCategory/MenuCategoryList'
    at webpackContextResolve (app.js:41505)
    at webpackContext (app.js:41500)
    at Object.resolveComponent (app.js:42179)
    at Object.setPage (app.js:109)
    at Object.init (app.js:109)
    at VueComponent.created (app.js:96)
    at invokeWithErrorHandling (app.js:29752)
    at callHook (app.js:32109)
    at VueComponent.Vue._init (app.js:32891)
    at new VueComponent (app.js:33036)

我尝试将操作方法​​更改为此。

public function index()
        {
            return Inertia::render('MenuCategoryList');
        }

我仍然遇到同样的错误。我的代码有什么问题，我该如何解决？

4

2 回答 2

0

如果您运行命令npm run watch，项目总是会自动重建。然后你应该硬刷新（Ctrl + F5）你的浏览器来获得最新的变化。

于 2021-02-14T13:27:01.643 回答
-1

我遇到了同样的问题，我改成public function index()它public function page()并且它起作用了。

于 2021-05-04T02:45:12.170 回答