Laravel Blade视图集成SweetAlert2遇问题，求解决方案

错误原因说明 #

• 404报错：直接引用sweetalert2.all.min.js时路径错误，npm安装的文件存放在node_modules目录下，浏览器无法直接访问该目录，导致找不到文件。
• require is not defined：浏览器原生不支持Node.js的CommonJS模块语法，未经过打包工具处理的情况下，require函数无法被识别。

方法一：通过Laravel Mix打包（推荐） #

这是符合Laravel前端工作流的标准方式：

1. 安装依赖（已安装可跳过）：

   npm install sweetalert2
   

2. 在resources/js/app.js中导入并全局挂载：

   import Swal from 'sweetalert2';
   window.Swal = Swal; // 将Swal挂载到window对象，让Blade视图可直接调用
   

3. 编译前端资源：

   # 开发环境
   npm run dev
   # 生产环境（压缩代码）
   npm run prod
   

4. 在Blade布局文件（如layouts/app.blade.php）中引入编译后的脚本：

   <script src="{{ mix('js/app.js') }}"></script>
   

5. 测试使用：在任意Blade视图中直接调用：

   <script>
       Swal.fire('提示', 'SweetAlert2已正常集成！', 'success');
   </script>
   

方法二：CDN快速引入（适合快速测试） #

如果不想使用Laravel Mix打包，可直接通过CDN引入：
在Blade视图的<head>标签内或</body>结束前添加CDN链接：

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

添加后即可在视图的脚本中直接使用Swal对象，无需额外配置。

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