Laravel 8 (Inertia js) - 获取 Vue 错误 'app.js:30559 [Vue warn]: Error in created hook: "Error: Cannot

Question

我已经安装了一个使用Jetstream(惯性js堆栈(的Laravel 8。Jetstream提供的所有视图都正常工作。

问题是当我创建一个新的路由来呈现一个新Vue模板时，我在控制台中收到了这个错误：

app.js:30559 [Vue warn]: Error in created hook: "Error: Cannot find module './Test'"

我的路线在web.php 中创建

Route::get('/test', function() {
return InertiaInertia::render('Test');
});

"Test.vue"文件位于"resources/js/Pages"目录中。

<template>
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
Testing
</h2>
</template>

app.js

require('./bootstrap');
import Vue from 'vue';
import { InertiaApp } from '@inertiajs/inertia-vue';
import { InertiaForm } from 'laravel-jetstream';
import PortalVue from 'portal-vue';
Vue.use(InertiaApp);
Vue.use(InertiaForm);
Vue.use(PortalVue);
const app = document.getElementById('app');
new Vue({
render: (h) =>
h(InertiaApp, {
props: {
initialPage: JSON.parse(app.dataset.page),
resolveComponent: (name) => require(`./Pages/${name}`).default,
},
}),
}).$mount(app);

知道为什么没有找到Test.vue模板吗？

Answer 1

也许其他人和我一样来到了这里——我必须在Chrome中打开开发人员控制台，并确保在Network选项卡中检查了disable cache。

最重要的是，必须进入我的服务器并执行php artisan optimize以清除缓存的视图。

Answer 2

只需要运行'npm-run-dev'

Answer 3

您应该运行以下命令：npm run watch

它将跟踪您的所有更改并更新应用程序。

Answer 4

检查您是否有npm run watch或更好的npx mix watch。尝试php artisan optimize，当然；硬重新加载"；您的浏览器-对于Chrome，Windows上为Control+Shift+Delete，MacOS上为
Command+Shift+Telete

Answer 5

您需要运行npm watch来渲染vue页面：

Route::middleware(['auth:sanctum', 'verified'])
->get('/chat', function () {
return Inertia::render('Chat/container');
})
->name('chat');

Answer 6

对我来说，错误在于我创建模块目录的方式，它包含了与预期名称不同的其他不可见字符，所以我必须重新创建目录，这就解决了问题。

Ps：任何尝试这种方法的人都可以在可能的情况下重构