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或 imho 更好的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');

Answer 6

對我來說，錯誤在於我創建模塊目錄的方式，它包含與預期名稱不同的其他不可見字符，因此我不得不重新創建目錄並解決了它。

Ps：如果可能的話，任何嘗試這個的人都可以重構