Laravel Blade项目中closeAlert函数未定义错误求助

问题原因 #

Vite 默认将 JS 文件作为 ES 模块处理，模块内定义的函数默认不会暴露到全局 window 对象中。而你用 onclick="closeAlert()" 是在全局作用域下调用函数，自然找不到这个仅存在于模块内的方法。

可行解决办法 #

方法1：把函数挂载到全局window对象 #

修改custom.js里的函数定义，将其暴露到全局：

// custom.js
function closeAlert() {
  // 你的弹窗关闭逻辑代码
}

// 挂载到全局window对象
window.closeAlert = closeAlert;

方法2：用事件监听替代内联onclick #

放弃内联属性调用，改用JS事件监听，既符合模块化规范，也避免全局污染：

1. 给关闭按钮添加标识类或ID：

<button class="alert-close-btn">关闭弹窗</button>

2. 在custom.js中添加监听逻辑：

// custom.js
document.addEventListener('DOMContentLoaded', () => {
  document.querySelector('.alert-close-btn').addEventListener('click', closeAlert);
});

function closeAlert() {
  // 你的弹窗关闭逻辑代码
}

方法3：检查文件引入顺序与Vite配置 #

• 确认vite.config.js无错误配置，保证资源能正常编译
• 调整Blade中@vite的文件顺序，确保custom.js在使用它的DOM元素之前加载：

@vite(['resources/js/custom.js', 'resources/js/app.js'])

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