如何将React与Django集成，实现localhost:8000展示React前端

一、生产环境方案（最终部署用） #

这是最直接的落地方式，将React打包后交给Django托管静态资源：

1. 配置Vite打包路径
   在React项目的vite.config.js中修改build配置，指定打包输出目录到Django项目的静态文件夹下（示例为Django根目录的static/react，可根据你的项目结构调整）：

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

export default defineConfig({
  plugins: [react()],
  build: {
    outDir: '../django_project/static/react',
    base: '/static/react/'
  }
})

2. 打包React项目
   在React项目根目录执行打包命令：

npm run build

执行完成后，Django的static/react目录会生成打包后的HTML、JS、CSS等静态文件。

3. 配置Django的静态文件与视图

• 确保Django项目的settings.py已启用静态文件基础配置：

  STATIC_URL = '/static/'
  # 生产环境需额外配置STATIC_ROOT，用于收集所有静态资源
  # STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
  

• 创建Django视图返回React入口页面：
  在views.py中添加：

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

• 将React打包生成的index.html移动到Django的templates/react目录下，文件内的静态资源路径已由Vite根据base配置处理，无需额外修改。
• 在urls.py配置根路由指向该视图：

  from django.urls import path
  from . import views
  
  urlpatterns = [
      # 保留其他API路由
      path('', views.react_app, name='react_app'),
  ]
  

4. 启动Django服务器
   执行python manage.py runserver，访问localhost:8000即可看到React页面。

二、开发环境方案（支持热重载） #

开发阶段需要保留React的热重载能力，同时通过Django的8000端口访问页面：

1. 配置Vite开发服务器
   在vite.config.js中添加server配置，允许跨域并指定端口：

export default defineConfig({
  plugins: [react()],
  server: {
    port: 5173,
    cors: true
  }
})

2. 创建Django开发视图
   直接在Django模板中嵌入Vite开发环境的脚本，创建templates/react/dev.html：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Notes App</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="http://localhost:5173/@vite/client"></script>
    <script type="module" src="http://localhost:5173/src/main.jsx"></script>
  </body>
</html>

在views.py中添加返回该模板的视图：

from django.shortcuts import render

def react_dev(request):
    return render(request, 'react/dev.html')

3. 配置Django路由
   在urls.py中将根路由指向开发视图：

urlpatterns = [
    path('', views.react_dev, name='react_dev'),
    # 保留其他API路由
]

4. 启动双服务

• 先启动React开发服务器：npm run dev
• 再启动Django服务器：python manage.py runserver
  访问localhost:8000即可看到React页面，修改React代码会自动触发热重载。

三、额外注意事项 #

• 开发环境中React调用DjangoAPI时，可在Vite中配置代理避免跨域：
  在vite.config.js的server中添加：

  proxy: {
    '/api': {
      target: 'http://localhost:8000',
      changeOrigin: true
    }
  }
  

  这样React中请求/api/notes会自动转发到http://localhost:8000/api/notes。
• 生产环境部署前，需执行python manage.py collectstatic将所有静态资源收集到STATIC_ROOT目录（需提前在settings中配置）。

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