Django+React+Webpack集成报错TemplateDoesNotExist求助

核心问题分析 #

出现TemplateDoesNotExist的原因是Django无法定位到React打包后的index.html模板文件，核心问题在于模板查找路径未正确配置以及模板引用方式不符合Django规则。

分步解决方案 #

1. 配置Django模板查找路径 #

修改CSP/CSP/Settings.py中的TEMPLATES配置，将React打包后的dist目录添加到模板查找列表：

# 确保文件顶部导入Path模块
from pathlib import Path

BASE_DIR = Path(__file__).resolve().parent.parent

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        # 添加dist目录到模板查找路径
        'DIRS': [BASE_DIR / 'frontend' / 'dist'],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

2. 修正视图中的模板引用 #

修改frontend/views.py中的模板路径，去掉绝对路径，使用Django可识别的相对路径：

from django.shortcuts import render

def index(request, *args, **kwargs):
    # 直接引用dist目录下的index.html
    return render(request, 'index.html')

3. 配置静态文件路径（确保bundle.js可访问） #

在Settings.py中添加静态文件查找目录，让Django能找到Webpack打包后的bundle.js：

STATICFILES_DIRS = [
    BASE_DIR / 'frontend' / 'dist',
]

4. 调整index.html的静态资源引用 #

将frontend/dist/index.html改为Django模板格式，使用static标签引用静态文件：

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React + Django App</title>
</head>
<body>
    <div id="root"></div>
    <!-- 使用static标签引用bundle.js -->
    <script src="{% static 'bundle.js' %}"></script>
</body>
</html>

5. 确认根路由配置 #

检查项目根目录的urls.py（CSP/CSP/urls.py）是否包含frontend的路由：

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    # 将根路径指向frontend路由
    path('', include('frontend.urls')),
    # 你的API路由
    path('api/', include('api.urls')),
]

验证操作 #

1. 重新运行Webpack打包命令，确保dist目录生成最新的index.html和bundle.js
2. 启动Django开发服务器，访问根路径确认模板正常加载

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