Laravel Sail+Livewire项目中默认AlpineJS安装来源排查

安全阿岳

2026-6-25

查找Laravel/Livewire项目中默认AlpineJS的来源及版本管控方案

一、默认AlpineJS的常见来源

Livewire从v2版本开始就默认内置了AlpineJS，它不会通过单独的script标签或CDN引入，而是将AlpineJS打包进自身的核心脚本中。你可以：

查看项目vendor/livewire/livewire/resources/js目录，里面包含AlpineJS的源码文件，Livewire在构建时会将其合并到自身的输出脚本里。
打开浏览器开发者工具，查看页面渲染后的源码，找到livewire.js或livewire.min.js，查看脚本内容会发现Alpine的初始化逻辑。

如果你的项目使用了Breeze、Jetstream这类官方starter kit，它们的前端模板默认会关联AlpineJS，可能是通过Livewire间接引入，也可能在resources/js/bootstrap.js或app.js中有相关注册逻辑。

Sail默认镜像不会预装全局AlpineJS，可进入容器验证：

sail shell
npm list -g alpinejs

若返回空结果，即可排除全局安装的可能。

检查Livewire配置文件
打开config/livewire.php，查找alpine配置项：
```
'alpine' => [
    'version' => '3.x',
    'cdn' => false,
],
```
这里的配置决定了Livewire是使用自带的Alpine还是指定CDN版本，也可通过设置'alpine' => false禁用自动加载。
分析前端打包流程
查看项目的vite.config.js（Laravel 9+）或webpack.mix.js（旧版本），确认是否有手动引入Alpine的配置；运行sail npm run build后，检查public/js目录下的打包产物，搜索Alpine关键字确认是否包含其代码。
浏览器端验证
在浏览器控制台执行Alpine.version，可以直接查看当前加载的Alpine版本；同时在Elements面板中搜索所有script标签，确认是否有重复引入的Alpine脚本。

在config/livewire.php中关闭自动加载：

'alpine' => false,

然后通过npm安装指定版本的Alpine：

sail npm install alpinejs@3.12.3

在resources/js/app.js中手动注册：

import Alpine from 'alpinejs';
window.Alpine = Alpine;
Alpine.start();

若想保留Livewire的集成逻辑，可在config/livewire.php中配置指定CDN版本：

'alpine' => [
    'cdn' => 'https://cdn.jsdelivr.net/npm/alpinejs@3.12.3/dist/cdn.min.js',
],

这样Livewire会加载你指定的CDN版本，而非自带版本。

修改配置后重新打包前端资源，在浏览器控制台执行Alpine.version确认版本符合预期，同时检查页面是否再出现重复加载的异常。

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