Laravel 8安装Jetstream v2.9与Livewire后登录注册页CSS失效求助

环境信息 #

• PHP 7.3
• Laravel 8.0
• Node.js 13.13.0
• NPM 6.14.4
• Jetstream v2.9（Livewire栈）

问题描述 #

安装Jetstream并执行常规初始化命令后，登录、注册页面CSS完全失效，页面样式错乱。

执行的初始化命令：

composer require laravel/jetstream 
php artisan jetstream:install livewire 
npm install
npm run dev
php artisan migrate

已尝试的操作：

• 更换Node.js版本重新安装依赖
• 在guest.blade.php和app.blade.php手动添加asset()引入app.css和app.js

可行解决方案 #

1. 排查资源编译问题 #

首先确认npm run dev编译过程是否报错，若存在依赖安装异常，执行以下步骤重置：

# 删除旧依赖文件
rm -rf node_modules package-lock.json
# 重新安装依赖
npm install
# 重新编译资源
npm run dev

编译完成后检查public/css/app.css和public/js/app.js是否生成且文件大小正常（空文件则说明编译失败）。

2. 恢复Jetstream默认的资源引入方式 #

Jetstream Livewire栈默认使用@vite指令加载资源，不要手动替换为asset()，检查guest.blade.php的<head>区域是否包含：

@vite(['resources/css/app.css', 'resources/js/app.js'])

若之前手动添加了asset()的引入代码，先注释或删除，保留原生的Vite指令。

3. 清理缓存 #

执行命令清理Laravel配置和视图缓存，同时强制刷新浏览器（Ctrl+F5）清除前端缓存：

php artisan config:clear
php artisan view:clear

4. 重新发布Jetstream视图资源 #

如果以上步骤无效，重新发布Jetstream的视图文件，确保布局文件未被错误修改：

php artisan vendor:publish --tag=jetstream-views

发布完成后再次执行npm run dev编译资源。

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