Laravel表单页面重载后UI丢失问题求助（Laravel 11.33.2）

问题描述 #

服务器部署的Laravel 11.33.2项目中，所有表单页面重载后仅显示原始HTML，UI样式丢失，资源链接直接指向本地文件路径；只有执行缓存清除操作后，UI才能正常显示，其他页面无此异常。问题页面的Blade代码如下：

@extends('layouts.admin')

@section('content')
<div class="container-fluid">

    <!-- start page title -->
    <div class="row">
        <div class="col-12">
            <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                <h4 class="mb-sm-0 font-size-18">Form Repeater</h4>

                <div class="page-title-right">
                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a href="javascript: void(0);">Forms</a></li>
                        <li class="breadcrumb-item active">Form Repeater</li>
                    </ol>
                </div>

            </div>
        </div>
    </div>
    <!-- end page title -->

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title mb-4">Example</h4>
                    <form class="repeater" enctype="multipart/form-data">
                        <div data-repeater-list="group-a">
                            <div data-repeater-item="" class="row">
                                <div class="mb-3 col-lg-2">
                                    <label for="name">Name</label>
                                    <input type="text" id="name" name="group-a[0][untyped-input]" class="form-control" placeholder="Enter Your Name">
                                </div>

                                <div class="mb-3 col-lg-2">
                                    <label for="email">Email</label>
                                    <input type="email" id="email" class="form-control" placeholder="Enter Your Email ID">
                                </div>

                                <div class="mb-3 col-lg-2">
                                    <label for="subject">Subject</label>
                                    <input type="text" id="subject" class="form-control" placeholder="Enter Your Subject">
                                </div>

                                <div class="mb-3 col-lg-2">
                                    <label for="resume">Resume</label>
                                    <input type="file" class="form-control" id="resume">
                                </div>

                                <div class="mb-3 col-lg-2">
                                    <label for="message">Message</label>
                                    <textarea id="message" class="form-control" placeholder="Enter Your Message"></textarea>
                                </div>
                                
                                <div class="col-lg-2 align-self-center">
                                    <div class="d-grid">
                                        <input data-repeater-delete="" type="button" class="btn btn-primary" value="Delete">
                                    </div>
                                </div>
                            </div>
                            
                        </div>
                        <input data-repeater-create="" type="button" class="btn btn-success mt-3 mt-lg-0" value="Add">
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- end row -->

    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title mb-4">Nested</h4>
                    <form class="outer-repeater">
                        <div data-repeater-list="outer-group" class="outer">
                            <div data-repeater-item="" class="outer">
                                <div class="mb-3">
                                    <label for="formname">Name :</label>
                                    <input type="text" class="form-control" id="formname" placeholder="Enter your Name...">
                                </div>

                                <div class="mb-3">
                                    <label for="formemail">Email :</label>
                                    <input type="email" class="form-control" id="formemail" placeholder="Enter your Email...">
                                </div>

                                <div class="inner-repeater mb-4">
                                    <div data-repeater-list="inner-group" class="inner mb-3">
                                        <label>Phone no :</label>
                                        <div data-repeater-item="" class="inner mb-3 row">
                                            <div class="col-md-10 col-8">
                                                <input type="text" class="inner form-control" placeholder="Enter your phone no...">
                                            </div>
                                            <div class="col-md-2 col-4">
                                                <div class="d-grid">
                                                    <input data-repeater-delete="" type="button" class="btn btn-primary inner" value="Delete">
                                                </div>
                                            </div>
                                            
                                        </div>
                                    </div>
                                    <input data-repeater-create="" type="button" class="btn btn-success inner" value="Add Number">
                                </div>

                                <div class="mb-3">
                                    <label class="d-block mb-3">Gender :</label>

                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="outer-group[0][inlineRadioOptions]" id="inlineRadio1" value="option1">
                                        <label class="form-check-label" for="inlineRadio1">Male</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="outer-group[0][inlineRadioOptions]" id="inlineRadio2" value="option2">
                                        <label class="form-check-label" for="inlineRadio2">Female</label>
                                    </div>                                                          
                                </div>

                                <div class="mb-3">
                                    <label for="formmessage">Message :</label>
                                    <textarea id="formmessage" class="form-control" rows="3" placeholder="Enter Your Message"></textarea>
                                </div>
                                <button type="submit" class="btn btn-primary">Submit</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- end row -->

</div>
@endsection

解决方案 #

1. 验证Vite资源编译与引入 #

Laravel 11默认使用Vite管理前端资源，确保布局文件layouts/admin.blade.php中用正确的Vite助手引入资源：

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

生产环境必须先执行编译命令：

npm run build

确认.env中的APP_URL设置为服务器域名（如https://your-domain.com），Vite会基于此生成正确的资源URL，避免出现本地路径。

2. 清理并禁用不必要的缓存 #

• 一次性清理所有缓存：

php artisan view:clear
php artisan route:clear
php artisan config:clear
php artisan cache:clear

• 针对表单页面禁用视图缓存：在对应控制器方法中添加：

use Illuminate\Support\Facades\View;

public function showForm()
{
    View::flush();
    return view('your-form-view');
}

或者在部署脚本中固定加入缓存清理命令，避免部署后出现缓存残留。

3. 检查路由缓存冲突 #

如果项目使用了路由缓存（php artisan route:cache），表单路由可能因动态参数或路由规则导致解析异常。执行php artisan route:clear后测试页面，若问题解决，后续部署时避免对包含动态表单的路由进行缓存，或确保路由规则正确生成缓存。

4. 排查表单组件资源加载 #

页面中用到了表单 repeater 组件，确认组件的CSS/JS已正确导入到resources/js/app.js或resources/css/app.css中，例如：

// resources/js/app.js
import 'path-to-repeater-component/dist/repeater.css';
import Repeater from 'path-to-repeater-component';

编译后确保这些资源被包含在public/build目录中，避免动态加载导致的缓存不更新。

5. 添加资源版本强制刷新 #

在资源链接中添加版本号或哈希，强制浏览器重载资源，避免旧缓存：

<link rel="stylesheet" href="{{ asset('css/app.css') }}?v={{ config('app.version') }}">
<script src="{{ asset('js/app.js') }}?v={{ config('app.version') }}"></script>

在config/app.php中设置'version' => '1.0.0'，更新时修改版本号即可。

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