为什么JS模块在DevTools显示已连接，但调用导出函数无法生效？

你代码存在两处核心错误，按以下步骤修改即可正常运行：

• 错误1：<script>标签同时配置了src属性与内部执行代码。ES Module规范下，带有src属性的脚本标签会直接忽略内部的所有代码，仅加载执行src指向的文件内容，你编写的导入、调用逻辑完全没有被执行。
• 错误2：原生ES Module导入时必须补全完整文件后缀，你写的导入路径./module缺少.js后缀，会触发模块加载失败。

正确代码示例 #

修改后的HTML代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 移除src属性，单独使用内部module脚本 -->
    <script type="module">
        // 补全.js后缀
        import consoleLog from './module.js';
        consoleLog();
    </script>
</head>
<body>

</body>
</html>

module.js代码无需修改，修改后刷新页面即可看到控制台正常输出对应日志。

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