Phaser+TypeScript项目Node.js本地服务器MIME类型不匹配求助

问题根源分析 #

你遇到的MIME类型不匹配错误，本质是服务器无法正确找到TS文件，返回了HTML格式的404错误页面，导致浏览器收到的内容类型是text/html而非预期的脚本类型。另外还有核心问题：浏览器原生不支持直接运行TypeScript文件，必须先编译为JavaScript。

分步解决方案 #

1. 修复Express静态文件路径错误 #

你的服务器代码里静态目录拼接缺少斜杠，导致路径解析错误：

// 错误写法：路径拼接后会变成类似 /home/userprojectpublic 的无效路径
app.use(express.static(__dirname + 'public'));

// 正确写法：添加斜杠，确保路径拼接正确
app.use(express.static(__dirname + '/public'));

2. 编译TypeScript为JavaScript（核心步骤） #

浏览器无法解析TS语法，必须先编译成可执行的JS：

• 初始化TS配置：在项目根目录执行 tsc --init，生成tsconfig.json配置文件
• 修改tsconfig.json关键配置项：

  {
    "target": "ES6", // 适配大部分现代浏览器
    "outDir": "./public/dist", // 指定编译后的JS文件输出到public下的dist目录
    "rootDir": "./src", // 指向你的TS源码存放目录（比如src文件夹）
    "module": "ESNext",
    "strict": true
  }
  

• 执行编译：运行 tsc 手动编译一次，或者 tsc --watch 自动监听文件变化实时编译
• 更新index.html，引用编译后的JS文件：

  <script type="text/javascript" src="/dist/Game.js"></script>
  <script type="text/javascript" src="/dist/scene/Boot.js"></script>
  <script type="text/javascript" src="/dist/scene/GameScene.js"></script>
  

3. （可选）若需直接提供TS文件（不推荐） #

如果仅用于测试，需要让服务器正确返回TS文件的MIME类型，可手动添加映射：

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

// 给.ts文件添加正确的MIME类型映射
express.static.mime.define({
  'application/typescript': ['ts']
});

app.use(express.static(__dirname + '/public'));

// 其余服务器代码不变

验证修复 #

重启Express服务器，刷新浏览器后检查网络请求：

• 目标文件应返回200状态码
• 响应头的Content-Type应为application/javascript（编译后的JS）或application/typescript（直接提供TS的情况）

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