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

【问题标题】：Laravel 8 (Inertia js) - Getting Vue error 'app.js:30559 [Vue warn]: Error in created hook: "Error: Cannot find module...'Laravel 8 (Inertia js) - 获取 Vue 错误'app.js:30559 [Vue 警告]：创建钩子中的错误：“错误：找不到模块...”
【发布时间】：2021-01-07 10:14:18
【问题描述】：

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

【问题讨论】：

将 test 重命名为其他任何名称，然后编译即可工作

标签： laravel vue.js inertiajs jetstream

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

只需要运行'npm run dev'

【讨论】：

【解决方案3】：

你应该运行这个命令：npm run watch

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

【讨论】：

【解决方案4】：

检查您是否有npm run watch 或恕我直言更好的npx mix watch。尝试php artisan optimize，当然，“硬重新加载”您的浏览器 - 对于 Chrome，它是 Control+Shift+Delete 在 Windows 和 Command+Shift+Delete 在 MacOS

上

【讨论】：

【解决方案5】：

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

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

【讨论】：