我是
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);
},
});
当您尝试渲染具有错误名称或路径的组件时,会发生此错误。要解决此问题,请确保您尝试渲染的组件的名称和路径与控制器中的名称和路径匹配。如果是这种情况但错误仍然存在,只需修改 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`]
);
},