Laravel Livewire 3内联脚本不生效无报错，请求技术协助

核心排查与修复方案 #

• 确认脚本栈的加载顺序
  必须保证layout中的@stack('scripts')放在Livewire核心脚本之后。Livewire 3的核心脚本通常是@livewireScripts（Vite环境则是@vite('resources/js/livewire.js')），正确的代码顺序如下：

  <!-- Livewire核心脚本 -->
  @livewireScripts
  <!-- 自定义脚本栈 -->
  @stack('scripts')
  

  若栈在核心脚本之前，Livewire事件系统未初始化，无法监听到任何事件。

• 使用Livewire 3正确的事件绑定方式
  livewire:init是Livewire 3的标准初始化事件，但可以通过组件钩子更精准地触发：

  @push('scripts')
  <script>
      document.addEventListener('livewire:init', () => {
          // 监听所有组件初始化事件
          Livewire.hook('component.init', (component) => {
              // 可针对特定组件过滤
              if (component.name === 'your-component-name') {
                  console.log('组件已初始化');
              }
          });
      });
  </script>
  @endpush
  

  也可以直接在组件根元素使用wire:init指令绑定组件内的方法，替代全局事件监听。

• 清除缓存与静态资源
  执行以下命令解决缓存导致的脚本不更新问题：

  php artisan cache:clear
  php artisan view:clear
  # Vite环境需重新构建资源
  npm run build
  

• 验证组件是否正确挂载
  检查页面源码中是否存在组件的wire:id属性，确认组件已成功渲染到页面。若组件未挂载，脚本自然无法触发。

• 临时排查脚本执行问题
  暂时移除@push，直接在组件视图末尾写入脚本，验证脚本本身是否可执行：

  <script>
      console.log('脚本已加载');
      document.addEventListener('livewire:init', () => {
          console.log('livewire:init事件触发');
      });
  </script>
  

  若此方式生效，说明问题出在@stack的配置上，回到第一步重新检查栈的位置。

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