使用Vite.js时HTML无法调用JS文件定义的startLogin函数怎么办

问题根因 #

你在引入login.js的时候给script标签加了type="module"属性，ES 模块有独立的私有作用域，你在模块内部定义的startLogin函数默认只在模块内部可访问，不会自动挂载到全局window对象上。而 HTML 内联的onclick事件只能调用全局作用域下挂载的函数，所以点击时会报函数未定义。
你之前测试的JS里直接写DOM操作能生效，是因为代码直接执行不用暴露给外部调用；函数放到HTML的普通script标签里能生效，是因为普通script没有模块隔离，函数默认会挂到全局。Vite项目默认要求引入的JS脚本使用ES模块规范，所以你加的type="module"属性是正确的，不需要移除。

解决方案 #

这里给两种可直接落地的修复方案：

方案1：手动将函数挂载到全局作用域（改造成本最低） #

在login.js的末尾追加一行代码即可：

window.startLogin = startLogin

这样全局作用域下就能访问到startLogin函数，原有onclick绑定不用改就能正常运行。

方案2：移除内联onclick，在JS中绑定事件（更符合现代开发规范） #

首先修改HTML里的按钮，给它加个唯一ID，移除onclick属性：

<button type="button" class="btn btn-primary" id="emailLoginBtn">
  Send Email Login
</button>

然后在login.js中添加事件绑定逻辑：

document.querySelector('#emailLoginBtn').addEventListener('click', () => {
  startLogin('email')
})

这种方案避免了全局变量污染，也更方便后续逻辑维护。

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