Django应用中从config文件夹加载JSON文件至JS代码的配置方案

出现404是因为Django默认仅自动服务static和media目录下的静态资源，自定义的config文件夹不在默认服务范围内，所以直接访问/config/stepsTours.json会失败。以下两种方案可以解决：

方案一：将config文件夹纳入静态文件管理（推荐，适合静态配置文件） #

• 打开项目settings.py，找到或新增STATICFILES_DIRS配置，添加config文件夹路径：

  STATICFILES_DIRS = [
      BASE_DIR / "static",
      BASE_DIR / "config",
  ]
  

• 调整前端fetch路径：
  • 若在Django模板中，先加载静态标签{% load static %}，再用{% static 'stepsTours.json' %}生成正确URL；
  • 若在独立JS文件中，直接使用/static/stepsTours.json（前提是STATIC_URL为默认的/static/）。
• 开发环境下runserver会自动处理；生产环境需运行python manage.py collectstatic，将静态文件收集到STATIC_ROOT目录后由Web服务器（如Nginx）提供服务。

方案二：通过URL路由直接返回JSON文件（适合需动态处理的场景） #

• 在项目urls.py中添加路由及对应的视图函数：

  from django.http import JsonResponse
  import json
  from pathlib import Path
  
  def serve_tour_steps(request):
      # 根据实际路径调整，确保能找到config文件夹下的JSON文件
      json_file = Path(__file__).parent / "config" / "stepsTours.json"
      with open(json_file, 'r', encoding='utf-8') as f:
          tour_data = json.load(f)
      return JsonResponse(tour_data)
  
  urlpatterns = [
      # 已有路由...
      path('config/stepsTours.json', serve_tour_steps),
  ]
  

• 此时前端原有的/config/stepsTours.json路径即可正常访问。

注意事项 #

• 方案一中，config文件夹下的文件会被当作静态资源公开访问，请勿存放敏感配置；
• 生产环境优先选择方案一，Web服务器直接服务静态文件的性能远高于Django视图返回。

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