Django 4集成React应用遇静态资源404及MIME类型错误求助

核心问题分析 #

控制台的404+MIME类型错误，本质是Django未能正确定位到React打包后的JS文件，返回了404页面（HTML格式），导致浏览器无法执行脚本。以下是针对性排查步骤：

1. 检查Django静态文件配置 #

打开settings.py，确认以下配置：

• STATIC_URL：必须为'/static/'，避免生成错误的文件路径
• STATICFILES_DIRS：确保包含React打包输出的静态目录，示例：

  STATICFILES_DIRS = [
      BASE_DIR / "frontend/static",  # 对应webpack输出的static/frontend目录上级
  ]
  

• WEBPACK_LOADER：验证与webpack配置的匹配性：

  WEBPACK_LOADER = {
      'DEFAULT': {
          'BUNDLE_DIR_NAME': 'frontend/',  # 对应webpack输出的子目录
          'STATS_FILE': BASE_DIR / "frontend/webpack-stats.json",  # 确保stats文件路径正确
      }
  }
  

• 开发模式下需确保DEBUG = True，Django会自动处理静态文件路由；生产模式需执行python manage.py collectstatic收集文件。

2. 核对Webpack输出与Bundle Tracker配置 #

打开webpack.config.js：

• output.path：必须指向Django能识别的静态目录，示例：

  output: {
      path: path.resolve(__dirname, 'static/frontend'),  // 与STATICFILES_DIRS对应
      filename: '[name]-[hash].js',
      publicPath: '/static/frontend/'  // 必须与STATIC_URL+BUNDLE_DIR_NAME一致
  }
  

• BundleTracker：确保stats文件生成路径正确，示例：

  new BundleTracker({filename: './webpack-stats.json'})
  

  执行打包命令（如npm run build）后，检查webpack-stats.json中的chunks字段，确认文件路径与实际生成的JS文件一致。

3. 验证模板文件的静态引用 #

检查渲染React的Django模板：

• 使用{% render_bundle 'frontend' %}时，查看页面源码生成的<script>标签，确认src为/static/frontend/frontend-xxx.js格式，而非错误的/frontend/static/frontend/xxx.js。
• 若路径错误，需调整WEBPACK_LOADER的BUNDLE_DIR_NAME或Webpack的publicPath。

4. 排查URL路由冲突 #

• 若Django配置了SPA捕获路由（如path('', TemplateView.as_view(template_name='index.html'))），需确保静态文件路由优先匹配，开发模式下django.contrib.staticfiles已自动处理，但自定义路由可能覆盖，可手动添加：

  from django.contrib.staticfiles.views import serve
  
  urlpatterns = [
      # ...其他路由
      path('static/<path:path>', serve),
      path('', TemplateView.as_view(template_name='index.html')),
  ]
  

5. 基础检查 #

• 确认JS文件实际存在于配置的路径中，且文件权限为可读（Linux/macOS下需执行chmod +r）
• 检查路径大小写一致性（Linux/macOS区分大小写，Windows不区分）

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