Question

我刚刚开始使用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');
        }

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

Answer 1

如果您运行命令 npm run watch，项目将始终自动重建。然后，您应该硬刷新 (Ctrl + F5) 浏览器以获取最新更改。

Answer 2

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

Laravel 8 Jetstream Inertia未渲染视图组件

2 个答案: