如何在Statamic模板中正确使用JavaScript代码？

我来帮你解决这个问题～你遇到的TypeError: logout is not a function错误，本质是因为Vite默认会把你的JS文件当作ES模块处理，模块内部的函数不会自动暴露到全局的window对象上，而模板里的onclick事件是在全局上下文里执行的，所以找不到这个函数。

下面给你几个可行的解决办法，按推荐程度排序：

方法一：使用事件监听替代内联onclick（推荐） #

这是现代前端开发的最佳实践，既能分离HTML和逻辑代码，还能避免全局变量污染，也更安全。

1. 先修改模板里的HTML，去掉内联的onclick属性：

<div id="logout" class="logout hidden">
  <i class="material-icons">logout</i>
</div>
{{ vite src="resources/js/header.js" }}

2. 然后更新你的header.js代码，等待DOM加载完成后，给按钮绑定点击事件：

// 确保DOM元素都加载完成后再绑定事件
document.addEventListener('DOMContentLoaded', function() {
  // 找到logout按钮元素
  const logoutButton = document.getElementById('logout');
  // 确保元素存在再绑定事件
  if (logoutButton) {
    logoutButton.addEventListener('click', function() {
      return apiService.get('/logout');
    });
  }
});

方法二：把函数暴露到全局window对象上 #

如果你暂时不想改内联事件的写法，也可以把logout函数挂载到全局的window对象上，让模板的全局上下文能找到它：

修改header.js的代码：

function logout() {
  return apiService.get('/logout');
}

// 把函数挂载到window对象，使其成为全局可用的函数
window.logout = logout;

或者更直接的写法：

window.logout = function() {
  return apiService.get('/logout');
};

方法三：确认JS文件的加载顺序 #

有时候如果JS文件在DOM元素之前加载，可能会出现元素还没生成就绑定事件的问题，但你现在是用onclick内联事件，这个概率不大。不过可以确保你的Vite引入标签放在模板的底部（</body>标签之前），这样能保证DOM先解析完成，再加载JS代码。

总结 #

优先推荐方法一，它更符合现代前端的代码规范，也更易于维护和扩展。如果只是临时测试或者快速修复，方法二也能解决问题。

备注：内容来源于stack exchange，提问作者ChopaKo