Laravel 10+Vite环境下SweetAlert2未定义问题及本地部署咨询

问题重现 #

控制台抛出错误：

Uncaught ReferenceError: Swal is not defined
at HTMLButtonElement. (list:121:13)
at HTMLButtonElement.dispatch (jquery-3.7.0.js:5135:27)
at elemData.handle (jquery-3.7.0.js:4939:28)

关联的index.blade.php代码：

<script type="text/javascript">
    $(function() {
        $('.delete').click(function() {
            Swal.fire("hello");
        });
    });
</script>

现有配置问题分析 #

1. 未确保Vite入口文件正确导入bootstrap.js
2. bootstrap.js中混用CommonJS（require）和ES模块语法，不符合package.json中type: module的配置
3. 视图未通过Vite指令加载编译后的资源文件
4. Popper依赖版本冲突（同时安装v1和v2）

分步解决方案 #

1. 确认Vite入口文件导入bootstrap.js #

打开resources/js/app.js，确保包含以下导入语句（如果没有则添加）：

import './bootstrap';

2. 修正bootstrap.js的模块导入语法 #

替换原有bootstrap.js内容为ES模块语法：

import 'bootstrap';
import Swal from 'sweetalert2';
import $ from 'jquery';
import Popper from '@popperjs/core';

// 挂载到全局window对象
window.$ = window.jQuery = $;
window.Popper = Popper;
window.Swal = Swal;

3. 用Vite指令替换手动资源引入 #

修改app.blade.php，添加Vite指令加载编译后的CSS和JS：

<!-- 在页面头部或合适位置添加 -->
@vite(['resources/sass/app.scss', 'resources/js/app.js'])

<!-- 保留原有的javascript区块 -->
<script type="text/javascript">
    @yield('javascript')
</script>

4. 清理冲突依赖 #

卸载旧版popper.js（Bootstrap 5适配@popperjs/core）：

npm uninstall popper.js

5. 重新编译资源 #

执行开发环境编译：

npm run dev

生产环境编译：

npm run build

6. 测试验证 #

移除app.blade.php中的SweetAlert2 CDN链接，刷新页面后点击删除按钮，Swal应该能正常触发。

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