Phaser游戏项目部署遇game.js 404及MIME类型错误求助

Here's how to resolve the issues preventing your game.js from loading:

1. Validate File Structure #

First confirm your project follows this correct hierarchy:

project-root/
├── index.html
├── js/
│   └── game.js
└── server.js (if using Express)

Ensure game.js is directly inside the js folder, and index.html is in the root.

2. Fix Express Server Configuration #

If using Express, your server must explicitly serve static assets. Update server.js to:

const express = require('express');
const app = express();
const port = 3000;

// Serve all static files (js, css, images) from the project root
app.use(express.static(__dirname));

// Route for the main page
app.get('/', (req, res) => {
  res.sendFile(`${__dirname}/index.html`);
});

app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}/`);
});

This ensures the server can find and serve game.js at the correct path.

3. Correct Script Tag in index.html #

Use an absolute path for the game.js script to avoid path ambiguity, and ensure Phaser is loaded first:

<!DOCTYPE html>
<html>
<head>
    <title>Phaser Game</title>
    <script src="https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.min.js"></script>
</head>
<body>
    <script src="/js/game.js"></script>
</body>
</html>

The absolute path /js/game.js works reliably regardless of server setup.

4. Proper http-server Usage #

When using http-server, run it from your project root directory (not a subfolder) with:

http-server ./ -p 3000

This serves all files in the root, making js/game.js accessible at http://localhost:3000/js/game.js.

5. Quick Troubleshooting Checks #

• Clear Browser Cache: Do a hard refresh (Ctrl+Shift+R) to bypass cached 404 responses.
• File Permissions: On Linux/macOS, ensure game.js has read permissions:

  chmod +r js/game.js
  

• VSCode Live Server: Right-click index.html and select "Open with Live Server" to ensure it uses the project root as the server base.

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