JavaScript导入Hero类时报404资源加载失败错误如何解决

你遇到的404报错和后续潜在的运行错误由三个问题导致，按以下步骤修改即可解决：

• 导入语法不匹配：hero.js用export default默认导出Hero类，index.js不能用带大括号的命名导入写法，要去掉大括号直接导入。
• 导入路径缺失后缀：浏览器原生ES模块规范要求必须补全导入文件的.js后缀，你写./hero会被识别为请求无后缀的文件，自然返回404。
• canvas元素ID不匹配：index.html里canvas的ID是gameArea，index.js里错误写为gameScreen，会导致后续获取绘图上下文失败。

修正后的index.js代码 #

// 修正导入写法和路径
import Hero from "./hero.js";

// 修正canvas的ID参数
let canvas = document.getElementById("gameArea");
let ctx = canvas.getContext("2d");

const GAME_WIDTH = 1280;
const GAME_HEIGHT = 720;

ctx.clearRect(0, 0, 1280, 720);

let hero = new Hero(GAME_WIDTH, GAME_HEIGHT);
hero.draw(ctx);

额外注意 #

请确保三个文件放在同一根目录下，且通过本地服务器访问html文件，不要直接双击打开本地文件，否则浏览器跨域策略会拦截ES模块加载。本地开发可以使用VSCode的Live Server插件快速启动本地服务。

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