如何禁用Django页面渲染仅保留Django Rest Framework以配合Vue实现前后端整合？

嘿，这个需求完全可以实现！我帮你梳理一下具体的操作步骤，这样就能让Django只专注于提供API，把前端页面的事儿全交给Vue啦👇

1. 调整Django的URL路由配置 #

这是最核心的一步，要让Django只处理API请求，把所有非API的请求都转交给Vue。

• 首先，打开你的Django项目根目录下的urls.py，先把DRF的API路由放在最前面，确保这些请求优先被处理：

  from django.contrib import admin
  from django.urls import path, include
  from django.views.generic import TemplateView
  
  urlpatterns = [
      # 如果你不需要Django admin，可以直接删掉这一行
      path('admin/', admin.site.urls),
      # 这里是你的DRF API路由，比如你的clients接口就会是 /api/clients
      path('api/', include('your_api_app.urls')),
  ]
  

• 然后添加通配路由，把所有其他路径（比如/home）都指向Vue的入口页面index.html，一定要把这部分放在所有路由的最后，因为Django是按顺序匹配路由的：

  # 处理所有非API的请求，返回Vue的入口页面
  urlpatterns += [
      path('', TemplateView.as_view(template_name='index.html')),
      path('<path:path>', TemplateView.as_view(template_name='index.html')),
  ]
  

2. 配置模板与静态文件 #

接下来要让Django能找到Vue的页面和静态资源：

• 开发阶段：你可以让Vue和Django各自跑在不同端口，然后给Vue配置代理，把API请求转发到Django的端口。在Vue项目的vue.config.js里添加：

  module.exports = {
      devServer: {
          proxy: {
              '/api': {
                  target: 'http://localhost:8000', // Django的运行端口
                  changeOrigin: true
              }
          }
      }
  }
  

  这样你在Vue里调用/api/clients时，会自动转发到Django的服务，还能避免跨域问题。
• 生产阶段：先执行npm run build打包Vue项目，把打包后dist目录里的index.html放到Django的templates目录下，把dist/static里的所有静态资源（js、css、图片等）放到Django的static目录，或者在Django的settings.py里配置STATICFILES_DIRS指向Vue的dist/static路径，最后执行python manage.py collectstatic（如果配置了STATIC_ROOT的话）。

3. 精简Django配置（可选，让架构更干净） #

如果不需要Django的模板渲染、消息框架等功能，可以做这些优化：

• 在settings.py的INSTALLED_APPS里，移除不需要的应用，比如django.contrib.sites、django.contrib.messages（如果没用过的话），只保留必要的：

  INSTALLED_APPS = [
      'django.contrib.admin', # 不需要的话可以删掉
      'django.contrib.auth',
      'django.contrib.contenttypes',
      'django.contrib.sessions',
      'django.contrib.staticfiles',
      'rest_framework', # 必须保留的DRF应用
      # 你的API应用
      'your_api_app',
  ]
  

• 调整DRF的渲染器配置，让API默认只返回JSON格式（如果不需要浏览器里的可浏览API界面的话），在settings.py里添加：

  REST_FRAMEWORK = {
      'DEFAULT_RENDERER_CLASSES': [
          'rest_framework.renderers.JSONRenderer',
          # 如果你还需要在浏览器查看API，可以保留下面这行，否则删掉
          # 'rest_framework.renderers.BrowsableAPIRenderer',
      ]
  }
  

4. 测试验证 #

• 启动Django服务，访问your-site/api/clients，应该能看到JSON格式的客户端列表；
• 访问your-site/home，应该能看到Vue渲染的页面；
• 如果是开发阶段，启动Vue的开发服务器，访问localhost:8080/home也能正常加载页面，调用API时会自动转发到Django。

这样就能完美实现Django只做API服务，Vue负责前端页面的前后端分离架构啦！

备注：内容来源于stack exchange，提问作者Machigan