[英]Laravel 8 (Inertia js) - Getting Vue error 'app.js:30559 [Vue warn]: Error in created hook: "Error: Cannot find module...'
我已经设置了一个使用 Jetstream(惯性 js 堆栈)的 Laravel 8 安装。 所有 Jetstream 提供的视图都正常工作。
问题是当我创建一个呈现新 Vue 模板的新 Route 时,我在控制台中收到此错误:
app.js:30559 [Vue warn]: Error in created hook: "Error: Cannot find module './Test'"
我在 web.php 中创建的路线
Route::get('/test', function() {
return Inertia\Inertia::render('Test');
});
“Test.vue”文件位于“resources/js/Pages”目录中。
<template>
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
Testing
</h2>
</template>
应用程序.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 模板吗?
也许其他人像我一样来到这里 - 我必须在 Chrome 中打开开发者控制台并确保在“ Network
”选项卡中,我已disable cache
检查。
最重要的是,必须进入我的服务器并进行php artisan optimize
以清除缓存的视图。
只需要运行'npm run dev'
你应该运行这个命令: npm run watch
它将跟踪您的所有更改并更新应用程序。
检查您是否有npm run watch
或 imho 更好的npx mix watch
。 尝试php artisan optimize
,当然,“硬重新加载”您的浏览器 - 对于 Chrome,在Windows上是Control+Shift+Delete ,在MacOS上是Command+Shift+Delete
你需要运行npm watch来渲染 vue 页面:
Route::middleware(['auth:sanctum', 'verified'])
->get('/chat', function () {
return Inertia::render('Chat/container');
})
->name('chat');
对我来说,错误在于我创建模块目录的方式,它包含与预期名称不同的其他不可见字符,因此我不得不重新创建目录并解决了它。
Ps:如果可能的话,任何尝试这个的人都可以重构
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.