HTML中JavaScript模块的调用函数

比如说，我有以下使用Vue的JavaScript模块：

import Vue from "./vue/vue.esm.browser.js";

const app = new Vue({
    el: '#app',
    data: {
        message: 'Hello, world!',
    }
});

// Custom function for calling by the button
function changeMessage() {
    app.message = 'Hello from button!';
}

现在我来介绍一下这个模块：

<script src="js/site.js" type="module"></script>

但是，我在控制台中遇到以下错误：

未捕获引用错误：在HtmlButtoneElement.onclick上未定义changeMessage

---

此外，在VisualStudio中，我甚至不能理解它的智能性。当我删除

type=“module”

时，一切正常。如何使html查看模块函数？

您可以在全局

窗口
对象上定义函数：



window.greet=函数（）{
警报（“你好”）
}
您好
查看模块导入/导出。@MarsAndBack您能更具体一点吗？正如@MarsAndBack所述，您需要了解如何导出该函数，并在需要时导入。关于这一点，我更新了我的答案，以演示它应该如何工作。如果它对你不起作用，那么你肯定在做别的事情。你能包含一个片段吗？你不会相信的，但如果我将文件
site.js
重命名为其他名称（比如，
site2.js
），那么代码就可以工作了！名称
site.js
有特殊意义吗？我发现这种行为是由于浏览器缓存造成的。我只是看了一下浏览器加载的JS文件，它已经过时了。就这样！在任何情况下，如果您确实想要使用模块，您仍然应该了解导入/导出。
<button onclick="changeMessage();">Press me</button>