如何实现Django与React的最佳集成？附Vite/Webpack使用困惑

方案一：分离式前后端（最适合简单场景） #

这种模式下前后端完全独立开发、部署，避开构建工具整合的坑，上手最快，适合你的需求。

步骤1：搭建Django REST Framework后端 #

• 创建项目与APP：

  django-admin startproject django_api
  cd django_api
  python manage.py startapp core
  

• 配置settings.py：
  先安装跨域依赖：

  pip install django-cors-headers
  

  修改配置项：

  INSTALLED_APPS = [
      # 默认内置应用
      'django.contrib.admin',
      'django.contrib.auth',
      'django.contrib.contenttypes',
      'django.contrib.sessions',
      'django.contrib.messages',
      'django.contrib.staticfiles',
      # 添加以下内容
      'rest_framework',
      'corsheaders',
      'core',
  ]
  
  MIDDLEWARE = [
      'corsheaders.middleware.CorsMiddleware',  # 放在最顶部
      # 其余默认中间件
      'django.middleware.security.SecurityMiddleware',
      'django.contrib.sessions.middleware.SessionMiddleware',
      'django.middleware.common.CommonMiddleware',
      'django.middleware.csrf.CsrfViewMiddleware',
      'django.contrib.auth.middleware.AuthenticationMiddleware',
      'django.contrib.messages.middleware.MessageMiddleware',
      'django.middleware.clickjacking.XFrameOptionsMiddleware',
  ]
  
  # 开发环境允许所有前端域名访问，生产环境替换为具体域名
  CORS_ALLOW_ALL_ORIGINS = True
  

• 编写API视图（core/views.py）：

  from rest_framework.decorators import api_view
  from rest_framework.response import Response
  
  @api_view(['GET'])
  def get_sample_data(request):
      return Response({
          'message': '数据来自Django API',
          'list': ['React', 'Django', 'Axios']
      })
  

• 配置路由（django_api/urls.py）：

  from django.contrib import admin
  from django.urls import path
  from core.views import get_sample_data
  
  urlpatterns = [
      path('admin/', admin.site.urls),
      path('api/sample/', get_sample_data),
  ]
  

• 启动后端：

  python manage.py runserver 8000
  

步骤2：搭建React前端（用Vite） #

• 创建Vite React项目：

  npm create vite@latest react-frontend -- --template react
  cd react-frontend
  npm install axios
  

• 修改src/App.jsx，用Axios请求API：

  import { useEffect, useState } from 'react'
  import axios from 'axios'
  
  function App() {
    const [apiData, setApiData] = useState(null)
    const [isLoading, setIsLoading] = useState(true)
  
    useEffect(() => {
      axios.get('http://localhost:8000/api/sample/')
        .then(response => {
          setApiData(response.data)
          setIsLoading(false)
        })
        .catch(error => {
          console.error('请求失败:', error)
          setIsLoading(false)
        })
    }, [])
  
    if (isLoading) return <div>加载中...</div>
  
    return (
      <div className="App">
        <h1>React + Django API</h1>
        <p>{apiData?.message}</p>
        <ul>
          {apiData?.list.map(item => (
            <li key={item}>{item}</li>
          ))}
        </ul>
      </div>
    )
  }
  
  export default App
  

• 启动前端：

  npm run dev
  

生产部署时，后端用Gunicorn+Nginx部署，前端可部署到Vercel、Netlify或Nginx，只需把前端API地址改为生产环境的后端域名即可。

方案二：整合到Django项目中（用django-vite） #

若需要前后端共用域名或结合Django模板系统，可采用此方案，以下是简化后的步骤：

步骤1：安装依赖 #

pip install django-vite
mkdir frontend
cd frontend
npm create vite@latest . -- --template react
npm install

步骤2：配置Django（settings.py） #

INSTALLED_APPS = [
    # 默认应用
    # 添加以下内容
    'django_vite',
]

# django-vite配置
DJANGO_VITE = {
    'default': {
        'manifest': 'manifest.json',
        'dev_mode': DEBUG,
        'dev_server_url': 'http://localhost:5173',
        'static_dir': 'frontend/dist',
        'assets_dir': 'frontend/src/assets',
    }
}

# 让Django识别前端打包后的静态文件
STATICFILES_DIRS = [
    BASE_DIR / 'frontend/dist',
]

步骤3：配置Vite（frontend/vite.config.js） #

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  build: {
    outDir: 'dist',
    manifest: true, // 必须开启，生成供django-vite读取的清单文件
  },
  server: {
    port: 5173,
    cors: true,
  }
})

步骤4：创建Django模板（core/templates/core/index.html） #

{% load django_vite %}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>React + Django 整合</title>
    {% vite_hmr_client %} <!-- 开发环境热更新 -->
    {% vite_asset 'src/main.jsx' %} <!-- 加载React入口文件 -->
</head>
<body>
    <div id="root"></div>
</body>
</html>

步骤5：配置视图与路由 #

• 视图（core/views.py）：

  from django.shortcuts import render
  
  def react_index(request):
      return render(request, 'core/index.html')
  

• 路由（django_api/urls.py）：

  urlpatterns = [
      path('admin/', admin.site.urls),
      path('api/sample/', get_sample_data),
      path('', react_index), # 首页加载React应用
  ]
  

步骤6：启动项目 #

• 启动Vite开发服务器（在frontend目录）：

  npm run dev
  

• 启动Django服务器：

  python manage.py runserver
  

访问http://localhost:8000即可看到整合后的应用，Axios请求API可直接用相对路径（如/api/sample/）。

总结 #

• 优先选方案一分离式前后端：无构建工具整合复杂度，开发、部署灵活，完全匹配你"简单API+React前端"的需求。
• 若需域名共用或模板整合，再选方案二django-vite，按上述简化步骤操作比官方指南更易上手。

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