在使用 ES 模块（type="module"）时，若未在 import 语句中显式指定 .js 文件扩展名，浏览器将无法正确解析路径，导致 404 报错。本文详解该问题的根本原因与标准解决方法。
在使用 es 模块（`type="module"`）时，若未在 `import` 语句中显式指定 `.js` 文件扩展名，浏览器将无法正确解析路径，导致 404 报错。本文详解该问题的根本原因与标准解决方法。
当你在浏览器环境中使用原生 ES 模块（即 <script type="module">）时，模块解析规则与 CommonJS 或 Node.js 的默认行为不同：浏览器要求所有相对或绝对模块说明符（specifier）必须包含完整的文件扩展名。这意味着以下写法是非法的：
// ❌ 错误：缺少 .js 扩展名，浏览器无法定位文件
import { setupEventListenersForIndex } from "./js/setup_event_listeners";而必须显式写出：
// ✅ 正确：明确指定 .js 扩展名
import { setupEventListenersForIndex } from "./js/setup_event_listeners.js";这是由 ECMAScript 模块规范 和主流浏览器实现共同决定的——它确保模块标识符是确定且无歧义的，避免因服务器配置（如是否启用目录索引、是否支持 .js 后缀省略）导致的行为不一致。
✅ 正确项目结构与代码示例
确保你的文件组织如下：
立即学习“Java免费学习笔记（深入）”；
toplevel/
├── index.html
├── main.js
├── main.css
└── js/
└── setup_event_listeners.jsindex.html（关键：type="module"）
<!DOCTYPE html> <html> <head><link rel="stylesheet" href="main.css"></head> <body> <!-- 其他 HTML 内容 --> <script type="module" src="./main.js"></script> </body> </html>
main.js（必须带 .js）
// ✅ 正确导入：含扩展名
import { setupEventListenersForIndex } from "./js/setup_event_listeners.js";
// 启动逻辑
setupEventListenersForIndex();js/setup_event_listeners.js（导出保持不变）
export function setupEventListenersForIndex() {
addEventListenerToLambdaButton();
addEventListenerToSubmitButton();
}
function addEventListenerToLambdaButton() {
const btn = document.getElementById("lambda-btn");
if (btn) btn.addEventListener("click", () => console.log("Lambda triggered"));
}
function addEventListenerToSubmitButton() {
const form = document.querySelector("form");
if (form) form.addEventListener("submit", (e) => e.preventDefault());
}⚠️ 注意事项
- 不支持自动后缀解析：即使服务器能通过 Content-Type: text/javascript 正确返回文件，浏览器仍会因路径不匹配而发起 404 请求（如请求 /js/setup_event_listeners 而非 /js/setup_event_listeners.js）。
- 不依赖 Live Server 配置：VS Code Live Server 默认不启用 .js 后缀重写，因此修改其设置无法绕过该限制；必须修正 import 语句本身。
- 其他扩展名同理：若使用 .mjs，也需写成 ./js/setup_event_listeners.mjs；.ts 文件则不能直接被浏览器执行，需先编译为 JS。
- 动态 import() 同样适用：import("./js/setup_event_listeners.js") 也必须带扩展名。
✅ 总结
ES 模块在浏览器中运行时，import 路径是严格字面量解析的，不进行任何隐式补全。这是现代前端工程化（如 Vite、Webpack）通常自动处理却容易被手写项目忽略的关键细节。只要确保所有 import 语句中的模块路径以 .js（或对应实际扩展名）结尾，即可彻底解决 ERR_ABORTED 404 问题，并符合跨浏览器兼容性标准。
