无法通过Django部署React构建文件，遇MIME类型错误求助

问题本质 #

请求静态文件时Django返回HTML（多为404页面），导致MIME类型不匹配，核心是静态文件路径配置或存放位置错误，Django找不到资源。

修复步骤 #

1. 核对静态文件位置与名称 #

• 确认static/my-react-app/assets下存在index-CgY6hLMH.css、index-LlsxC_Wu.js等文件，文件名哈希需和index.html引用的完全一致。
• React构建时设置正确的publicPath：
  在vite.config.js（或Webpack/Craco配置文件）中添加：

  export default defineConfig({
    base: '/static/my-react-app/'
  })
  

  重新构建dist，确保生成的资源路径带正确前缀。

2. 修正Django静态配置 #

• settings.py中确保：

  STATIC_URL = '/static/'
  STATICFILES_DIRS = [BASE_DIR / "static"]
  

  生产环境需额外配置STATIC_ROOT = BASE_DIR / 'staticfiles'，并执行python manage.py collectstatic收集静态文件。

3. 调整index.html资源引用 #

• 若将index.html作为Django模板，开头加{% load static %}，资源路径替换为：

  <link rel="stylesheet" href="{% static 'my-react-app/assets/index-CgY6hLMH.css' %}">
  <script type="module" src="{% static 'my-react-app/assets/index-LlsxC_Wu.js' %}"></script>
  

• 也可直接用绝对路径：/static/my-react-app/assets/xxx

4. 检查Django路由规则 #

• 避免捕获所有路径的URL（如path('', views.index)）匹配到/static/开头的请求，确保Django默认的静态文件路由生效。

5. 直接验证资源可访问性 #

• 在浏览器输入http://localhost:8000/static/my-react-app/assets/index-CgY6hLMH.css，若返回CSS内容则配置正确；若返回HTML或404，继续排查文件位置和配置。

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