Vite原生项目HTML内联onclick调用函数报未定义错误原因咨询

问题根本原因 #

你遇到的报错本质是ES 模块的作用域隔离特性导致的，具体可以拆解为两点：

1. 你在 index.html 里引入 main.js 时用了 <script type="module" src="main.js"></script>，加了 type="module" 标识的 JS 文件会被浏览器当作 ES 模块处理，ES 模块的顶级作用域是模块私有作用域，而非传统普通脚本的全局 window 作用域。也就是说你在 main.js 里定义的变量、函数默认都只在这个模块内部可访问，不会自动挂载到全局 window 对象上。
2. HTML 内联写的 onclick="sendMessage()" 这类事件回调，执行时只会从全局 window 作用域下查找对应的函数，自然找不到被隔离在模块内部的 sendMessage，就会抛出 ReferenceError。

额外说明：你给函数加的 export 关键字是用于给其他 ES 模块导入调用的，同样不会把函数暴露到全局作用域，所以也解决不了内联事件找不到函数的问题。

可选解决方案 #

除了你已经在用的 addEventListener 绑定方案（也是更推荐的方案，不会污染全局作用域），如果你一定要用内联 onclick 的写法，也可以手动把需要的函数挂载到全局 window 对象上，在 main.js 里加一行代码即可：

window.sendMessage = sendMessage

不过这种写法会污染全局命名空间，多人协作或者项目变大后容易出现命名冲突，非特殊情况不推荐使用。

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