使用Live Server时JavaScript Modules无法正常工作的问题

核心原因 #

浏览器加载ES模块时会严格按照相对路径/绝对路径解析，你导入dusra时未指定完整文件名或正确路径，导致Live Server根目录下找不到对应文件。

具体修复步骤 #

• 补全导入路径的文件名与结构
  ES模块原生不支持省略.js后缀，也不能直接使用裸模块名（类似Node.js的模块引用方式），必须明确路径和后缀：

  // 错误写法
  import { foo } from 'dusra';
  // 正确写法（同目录下的文件）
  import { foo } from './dusra.js';
  // 若文件在子目录，比如utils文件夹下
  import { foo } from './utils/dusra.js';
  

• 对齐文件位置与服务器根目录
  Live Server的根目录是你启动服务时打开的文件夹，比如你在my-project文件夹启动服务，那http://127.0.0.1:8080/就对应my-project目录。如果dusra.js在my-project/src下，导入路径必须写./src/dusra.js，不能仅写dusra。

• 检查入口脚本的路径正确性
  确保HTML中的入口模块路径无误：

  <script type="module" defer src="./main.js"></script>
  

  这里的./main.js要对应实际文件位置，不能省略相对路径前缀。

• 强制清理浏览器缓存
  缓存可能导致路径解析异常，按Ctrl+Shift+R强制刷新页面，或在浏览器DevTools的Network面板勾选「Disable cache」后重新加载。

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