laravel - Laravel 8 (Inertia js) - 获取 Vue 错误'app.js:30559 [Vue 警告]：创建钩子中的错误：“错误：找不到模块...”

Question

我已经设置了一个使用 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 模板吗？

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+Delete

Answer 5

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

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