Laravel+Vite项目中toggle_spinner函数外部文件调用报错

你遇到的问题本质是ES模块的作用域限制——Vite默认把JS当作ES模块打包，模块里的函数默认只在模块内部可见，不会暴露到全局window对象，所以HTML里的onclick属性找不到这个函数。

方案1：用事件监听替代onclick属性（推荐） #

这种方式不依赖全局变量，符合模块化开发规范，也完全不需要ID选择器。

在你的button.js里直接给目标按钮绑定点击事件：

// button.js
// 定义切换spinner的核心函数
function toggleSpinner(button) {
  // 这里写你的具体逻辑，比如切换加载状态类、禁用按钮、替换图标等
  button.classList.toggle('loading');
  button.disabled = !button.disabled;
}

// 等待DOM加载完成后，给所有需要该功能的按钮绑定事件
document.addEventListener('DOMContentLoaded', () => {
  // 用类名选择目标按钮（可自定义类名）
  document.querySelectorAll('.btn-with-spinner').forEach(btn => {
    btn.addEventListener('click', function() {
      toggleSpinner(this);
    });
  });
});

对应的HTML按钮只需添加指定类名：

<button class="btn-with-spinner bg-blue-500 text-white px-4 py-2">提交</button>

方案2：将函数挂载到全局window对象（快速兼容旧写法） #

如果一定要保留onclick属性的写法，可以把函数强制暴露到全局：

// button.js
window.toggle_spinner = function(button) {
  // 你的切换逻辑
  button.classList.toggle('loading');
}

此时HTML里的onclick就能正常调用：

<button onclick="toggle_spinner(this)">提交</button>

额外注意 #

• 确保button.js已正确导入到app.js中，比如import './button.js';
• 用DOMContentLoaded包裹事件绑定逻辑，避免DOM未加载完成时找不到按钮元素

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