Laravel 8 Jetstream Inertia 没有渲染视图组件

Posted 2023-03-21

【中文标题】Laravel 8 Jetstream Inertia 没有渲染视图组件

【英文标题】：Laravel 8 Jetstream Inertia is not rendering a view component

【发布时间】：2021-01-26 01:28:13

【问题描述】：

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

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

【问题讨论】：

你跑npm run dev了吗？

嗨，我需要渲染 MenuCategoryList/MenuCategoryList。另外，需要清除浏览器缓存。现在，它可以工作了。

【参考方案1】：

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

【参考方案2】：

我遇到了同样的问题，我将 public function index() 更改为 public function page() 并且成功了。