main.jsの読み込み時に出る「net::ERR_ABORTED 404 (Not Found)」の対処を教えてください

Question

実現したいこと

• 正常にjsファイルが読み込めるようにしたいです。

前提

TypeScriptで簡単なミニゲームを作っています。
テスト用のローカルサーバーとしてVSCodeのLive Serverを使っています。
tscコマンドでコンパイルしたjsファイルをindex.htmlで読み込むようにしていますが、main.jsからエラーが出て正常に動作しません。

発生している問題・エラーメッセージ

GET http://127.0.0.1:5500/dist/game net::ERR_ABORTED 404 (Not Found)

ディレクトリ構成

root/
　├ node_modules/
　├ dist/
        ├ main.js
        ├ game.js
        ├ player.js
        └ background.js
　├ src/
　│     ├ images/
　│     ├ index.html
　│     ├ main.ts 
　│     ├ game.ts　
　│     ├ player.ts
　│     ├ background.ts
　│     └ style.css
　├    package-lock.json
　├    package.json
　└    tsconfig.json

試したこと

main.tsでは下のようにしてgame.tsを読み込んでいます。

import { Game } from './game';

game.tsでは下のようにしてexportしています。

export class Game {
    // 中身は省略
}

おそらくパスの指定が間違っていると思うのですが、見つからなかったので質問としてあげました。
よろしくお願いします。

Answer 1

この回答はGPT-4による自動生成回答です

ディレクトリ構成によると、index.html が src ディレクトリ内にありますが、dist ディレクトリ内にあるべきです。index.html を dist ディレクトリに移動して、index.html 内のスクリプトタグで main.js を読み込むようにしてください。

ディレクトリ構成を以下のように変更してください。

root/
　├ node_modules/
　├ dist/
        ├ index.html
        ├ main.js
        ├ game.js
        ├ player.js
        └ background.js
　├ src/
　│     ├ images/
　│     ├ main.ts 
　│     ├ game.ts　
　│     ├ player.ts
　│     ├ background.ts
　│     └ style.css
　├    package-lock.json
　├    package.json
　└    tsconfig.json

そして、index.html 内のスクリプトタグを以下のように変更してください。

<script src="main.js"></script>

これで、正常にJSファイルが読み込まれるはずです。