SvelteKit+TypeScript部署NGINX后Worker静态文件加载失败问题

核心问题拆解 #

本地运行正常但NGINX部署后报错，本质是两个关键问题：

1. 浏览器无法直接加载.ts文件，本地开发工具（如Vite/Webpack）会自动编译TS为JS，但部署后直接暴露TS文件会导致MIME类型错误；
2. 路径解析错误+NGINX重定向规则，导致请求TS文件时返回302重定向到HTML页面，触发"MIME类型为text/html"的报错。

具体解决方案 #

1. 修复Worker的导入与编译流程 #

浏览器不支持直接运行TS代码，必须让构建工具处理Worker和TS文件：

• 将nsfwWorker.js改为nsfwWorker.ts，调整导入路径为编译后的模块（或用构建工具的路径别名）：

// nsfwWorker.ts
import { loadModel } from './nsfw'; // 用相对编译后文件的路径，或依赖构建工具的路径解析

• 在nsfw.ts中创建Worker时，使用import.meta.url让构建工具自动处理路径：

export async function isNsfwContent(videoElement: HTMLVideoElement) {
  return new Promise<number>((resolve, reject) => {
    // 用URL对象确保Worker路径在构建后正确
    const worker = new Worker(new URL('./nsfwWorker.ts', import.meta.url), { type: 'module' });
    // 后续逻辑保持不变
  });
}

• 确保构建工具（如Vite/Webpack）将Worker纳入编译流程，生成对应的JS文件到生产目录。

2. 调整NGINX静态文件配置 #

• 确认NGINX的root指令指向生产构建产物目录（如dist/build），而非项目根目录：

server {
  root /path/to/your/build/folder;
  # 其他配置
}

• 添加静态文件的MIME类型配置，避免TS/JS文件被识别为HTML：

http {
  types {
    text/typescript ts;
    application/javascript js;
    application/json json;
  }
}

• 排除静态文件的单页应用重定向规则（如果你的项目是SPA）：

location / {
  try_files $uri $uri/ /index.html;
}
# 优先处理静态文件，避免TS/JS请求被重定向到index.html
location ~* \.(js|ts|json|png|jpg|model.json)$ {
  try_files $uri =404;
}

3. 排查302重定向原因 #

• 检查NGINX中是否存在rewrite/return规则，将/src/开头的请求重定向到其他页面；
• 直接在浏览器访问nsfw.ts的URL，确认返回的是文件内容而非HTML页面，若返回404则说明路径配置错误。

4. 验证模型文件路径 #

确保/models/mobilenet_v2/model.json存在于NGINX的静态目录下，能通过浏览器直接访问到，避免模型加载失败影响Worker运行。

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