JavaScript文件导入时报404 (Not Found)错误该如何解决？

问题原因 #

• 浏览器原生 ES 模块导入要求必须填写完整文件后缀：你当前在 app.js 中写的导入路径是./customer，缺少.js后缀，浏览器会直接请求无后缀的/customer资源，因此返回404错误。
• 导入导出语法不匹配：customer.js 中使用的是export default默认导出规则，但 app.js 中使用了{person}的命名导入写法，二者规则不对应，路径修复后也会触发导出不存在的报错。

修复方案 #

按如下方式修改代码即可正常运行：

1. 修改app.js代码，补全后缀同时调整导入写法：

import person from "./customer.js";
console.log("helllo");

如果你想要保留命名导入的写法，也可以修改customer.js的导出规则：

export const person={
    name:"hello"
}

验证方式 #

将三个文件放在同一根目录下，通过本地服务打开HTML文件即可正常加载。

内容的提问来源于stack exchange，提问作者Os Snehith Ab