JetStream LiveWire自定义资料页引入组件功能失效及实现方法问询

一、功能无法运行的常见原因 #

• 确认Jetstream栈类型：只有Livewire栈的Jetstream才提供上述Livewire组件，如果你安装的是Inertia（Vue/React）栈，不存在这些Livewire组件，调用会直接报错。
• 检查账号删除功能配置：确认config/jetstream.php文件的features数组中已经开启了Features::accountDeletion()，你调用的hasAccountDeletionFeatures()方法会读取该配置，未开启时条件判断直接返回false，组件不会被渲染。
• 检查CSRF令牌配置：Livewire依赖CSRF令牌发起请求，确认页面head标签内存在<meta name="csrf-token" content="{{ csrf_token() }}">配置，缺失会导致所有Livewire组件交互失败。
• 检查Livewire组件可用性：如果之前修改过Jetstream组件命名空间或者未完整安装Jetstream资源，会导致组件找不到，可运行命令php artisan jetstream:install livewire --force重新发布资源，操作前请提前备份自己修改过的相关文件。
• 检查路由权限：当前页面的路由必须配置auth中间件，删除用户组件要求用户处于登录状态才能正常加载，未登录状态下组件会加载失败。
• 检查前端报错：打开浏览器开发者工具的控制台，查看是否存在JavaScript报错，常见的有Livewire脚本重复加载、静态资源路径错误等，可根据报错信息针对性修复。

二、自定义资料页操作步骤 #

• 复制默认模板：将vendor/laravel/jetstream/resources/views/profile/show.blade.php文件复制到项目的resources/views/profile/目录下，该文件是Jetstream默认的资料页模板，可直接在此基础上修改。
• 注册自定义路由：在routes/web.php文件中添加如下路由，优先级要高于Jetstream自带的路由注册，覆盖默认的资料页路由：

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\ProfileController;

Route::middleware(['auth', 'verified'])->group(function () {
    Route::get('/profile', [ProfileController::class, 'show'])->name('profile.show');
});

• 创建控制器：运行命令php artisan make:controller ProfileController生成控制器，在控制器中添加show方法返回自定义模板：

public function show()
{
    return view('profile.show');
}

• 按需引入组件：你可以根据需求在模板中增删Jetstream自带的Livewire组件，常用组件如下：
  • 个人信息修改组件：@livewire('profile.update-profile-information-form')
  • 密码修改组件：@livewire('profile.update-password-form')
  • 两步验证组件：@livewire('profile.two-factor-authentication-form')
  • 其他浏览器会话登出组件：@livewire('profile.logout-other-browser-sessions-form')
  • 账号删除组件：@livewire('profile.delete-user-form')
• 自定义组件逻辑：如果自带组件不满足需求，可运行命令php artisan make:livewire 你的组件名称创建自定义Livewire组件，替换对应位置的自带组件即可。

内容的提问来源于stack exchange，提问作者Emanuel