Laravel 8中@stack引入JavaScript代码不生效如何解决

Laravel Blade的@push/@stack有严格的作用域限制，只会向当前视图渲染上下文内存在的栈注入内容。你的业务页面没有直接继承定义了@stack('scripts')的admin.master布局，只是通过@component引入了一个自身继承master的content组件：

• 写在@component块外部的@push('scripts')属于业务页面自身的独立渲染上下文，这个上下文里根本不存在scripts栈，注入的JS代码会被直接丢弃，不会出现在最终渲染的页面里。

方案1：中间布局透传（适配现有component写法） #

只需要改一次中间层content.blade.php，增加脚本栈的承接转发逻辑，不用调整整体组件写法，也不会产生冗余JS。
修改后的content.blade.php代码：

@extends('admin.master')

@section('content')
   {{ $title }}
   {{-- 原有其他布局内容 --}}
   {{ $breadcrumb ?? '' }}
   {{ $slot }}
@endsection

{{-- 承接组件传入的脚本，转发到父布局的公共脚本栈 --}}
@push('scripts')
@stack('scripts')
@endpush

改完后把业务页面的单页JS代码移动到@component的包裹范围内，让指令处于组件渲染作用域即可正常生效：

@component('admin.layouts.content' , ['title' => 'example file'])
   @slot('breadcrumb')
        <li class="breadcrumb-item active">Example File</li>
   @endslot
   {{-- 其他业务内容 --}}

   @push('scripts')
   <script>
   console.log(1); // 测试JS代码
   </script>
   @endpush
@endcomponent

这种模式下每个页面的专属JS只会在当前页渲染，不会被其他引用content布局的页面加载。

方案2：改用原生布局继承（最稳定，无额外兼容逻辑） #

如果你的业务页面都是整页渲染、不需要作为片段复用，直接放弃@component的组件引入方式，让业务页面直接继承content布局，@push会自动走完整的继承链，不需要额外透传就能生效。
业务页面代码示例：

@extends('admin.layouts.content')

@section('title', 'example file')

@section('breadcrumb')
<li class="breadcrumb-item active">Example File</li>
@endsection

@section('content')
{{-- 业务页面内容 --}}
@endsection

{{-- 这里的push直接命中master布局的栈，无需额外处理 --}}
@push('scripts')
<script>
console.log(1);
</script>
@endpush

这种写法完全符合Blade的设计逻辑，是Laravel官方推荐的整页布局写法，后续维护成本最低。

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