解决JavaScript导入导出中的NET::ERR_ABORTED 404错误

这个错误的核心是浏览器无法定位你要导入的template.js文件，以下是针对性的解决步骤：

1. 补充完整的文件扩展名 #

浏览器加载ES模块时必须指定完整的.js扩展名，不能省略。如果你的导入语句是：

import { 你的函数名 } from './template'

改成：

import { 你的函数名 } from './template.js'

2. 校验文件相对路径 #

确认template.js和你的主JS文件（或HTML引用的JS文件）的相对位置是否匹配：

• 若两者在同一目录：用./template.js
• 若template.js在子目录（比如src/template.js）：用./src/template.js
• 若template.js在上级目录：用../template.js
• 注意路径区分大小写（Linux/macOS系统对大小写敏感，Template.js和template.js会被识别为不同文件）

3. 确保脚本标签声明为模块 #

在HTML中引入主JS文件时，必须添加type="module"属性，否则浏览器不会按ES模块规则解析导入语句：

<script type="module" src="./你的主文件名.js"></script>

4. 检查本地服务器的根目录 #

你使用的127.0.0.1:5501通常是Live Server这类工具提供的服务，要确保服务器的根目录是你的项目根目录。比如你的项目结构是：

my-project/
├── index.html
├── main.js
└── template.js

启动服务器时要在my-project目录下启动，否则服务器无法访问到template.js。

正确示例 #

template.js：

export function demoFunc() {
  console.log('导入成功');
}

main.js：

import { demoFunc } from './template.js';
demoFunc();

index.html：

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

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