Inertia - 无法读取未定义的属性（读取“默认”）

Question

我是

Inertia

的新手，我想使用

Vue

服务器端渲染来渲染

Inertia

组件，我将

UserController.php

作为

resource

控制器，在我的

index

方法中渲染

Index.vue

成分：

UserController.js

<?php

namespace App\Http\Controllers;

use App\Models\User;
use Illuminate\Http\Request;
use Inertia\Inertia;
use Inertia\Response;
class UserController extends Controller
{

    public function index() : Response
    {
        return Inertia::render('Users/Index',[
            'users' => User::all()
        ]);
    }
...
}

只是一个简单的

Vue

组件，上面写着“索引页”

资源/js/Pages/Users/Index.vue

<script setup></script>

<template>
    <h1>Index Page</h1>
</template>

但我收到错误

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'default')

这是我的

Inertia

设置 资源/js/app.js

import "./bootstrap";
import { createApp, h } from "vue";
import { createInertiaApp } from "@inertiajs/vue3";

createInertiaApp({
    resolve: (name) => {
        const pages = import.meta.glob("./Pages/**/*.vue", { eager: true });
        return pages[`./Pages/${name}.vue`];
    },
    setup({ el, App, props, plugin }) {
        createApp({ render: () => h(App, props) })
            .use(plugin)
            .mount(el);
    },
});

Answer 1

当您尝试渲染具有错误名称或路径的组件时，会发生此错误。要解决此问题，请确保您尝试渲染的组件的名称和路径与控制器中的名称和路径匹配。如果是这种情况但错误仍然存在，只需修改 createInertiaApp 中的 resolve 函数，如下所示：

createInertiaApp({
    resolve: (name) => {
        const pages = import.meta.glob("./Pages/**/*.vue", { eager: true });
        return pages[`./Pages/Users/${name}.vue`];
    },
    setup({ el, App, props, plugin }) {
        createApp({ render: () => h(App, props) })
            .use(plugin)
            .mount(el);
    },
});

此修改解决了该问题，因为您正在尝试渲染位于“Pages”目录中的“Users”子文件夹中的组件。如果你有这样的结构：

页数 ├── 用户 ├── 客户 └── 管理员

您需要像这样修改 createInertiaApp 的 resolve 函数：

resolve: (name) => {
    const pages = import.meta.glob("./Pages/**/*.vue", { eager: true });
    return (
        pages[`./pages/Users/${name}.vue`] ||
        pages[`./pages/Clients/${name}.vue`] ||
        pages[`./pages/Admins/${name}.vue`]
    );
},