HTML设置script标签type为module时JS文件无法执行问题

问题现象 #

给<script>标签添加type="module"属性加载JS文件时，代码无法执行、控制台无输出；移除该属性以普通脚本形式加载时，代码可正常运行，控制台打印Start Successful。需要实现type="module"模式下JS文件和普通脚本一致的正常加载执行效果。

复现代码 #

异常场景 #

index.html：

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
          <script type="module" src="script.js"></script>
    </body>
</html>

script.js（运行无任何输出）：

console.log("Start Successful");

正常运行场景 #

仅移除script标签的type属性即可正常打印日志，index.html代码如下：

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
          <script src="script.js"></script>
    </body>
</html>

已知信息 #

• 开发环境为Visual Studio Code
• 曾怀疑需要配置相关JSON文件，但不清楚具体配置规则
• 已验证：不指定script标签type属性时代码可正常运行
• 同一份代码在repl.it平台可正常运行，仅在VSCode本地环境下module模式失效，已排除语法问题，推测和扩展设置、本地运行环境配置有关，需要排查方向指引与相关知识点参考。

根因说明 #

type="module"加载的ES模块受浏览器同源策略限制，不允许通过file://本地文件协议直接加载运行，普通脚本无此限制，这是本地双击打开HTML文件时模块脚本失效、在线平台运行正常的核心原因，和VSCode本身的配置文件没有直接关联。此时打开浏览器开发者工具的控制台，能看到明确的CORS跨域加载报错。

解决步骤 #

1. 停止直接双击打开本地HTML文件的调试方式，本地调试ES模块必须通过HTTP/HTTPS协议访问静态文件。
2. VSCode环境下最简便的方案是使用Live Server扩展：
   • 在扩展商店搜索并安装Live Server
   • 打开目标HTML文件，右键选择「Open with Live Server」，扩展会自动启动本地静态HTTP服务，默认访问地址为http://127.0.0.1:5500，通过该地址访问页面时，ES模块可正常加载执行。
3. 若不想安装扩展，本地已安装Node.js环境的前提下，可在项目根目录执行命令npx serve启动静态服务，通过命令输出的本地HTTP地址访问页面即可。
4. 补充知识点：ES模块脚本默认具备defer特性，会在DOM解析完成后执行，不会阻塞页面渲染，但该特性不会导致基础的console.log语句不执行，只要通过合法的HTTP协议加载就会正常输出。

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