Django与Vue必须彻底解耦，不可将Vue项目置于static/下直接引入；应采用独立进程+反向代理方案：开发时Vue通过vue.config.js代理API请求至Django，上线后由Nginx统一路由分发。
不能直接在Django模板里用 vue.createApp 启动前端应用——Django和Vue要彻底解耦，否则迟早掉进静态资源路径、路由冲突、开发热更新失效的坑里。
为什么不能把Vue项目放在 static/ 下直接引入？
Django的 static/ 目录只服务已构建好的静态文件，而Vue CLI开发时依赖 webpack-dev-server 提供的热重载、模块热替换（HMR）、代理API请求等功能。硬塞进 static/ 会导致：
- 每次改Vue代码都要手动
npm run build，再刷新Django页面——开发体验归零 -
vue-router的 history 模式会触发Django 404（因为Django没配fallback路由） - 环境变量（如
VUE_APP_API_BASE_URL）无法按开发/生产自动切换 -
axios请求地址写死成/api/xxx，但开发时需代理到http://localhost:8000，上线又要改
正确做法：两个独立进程，用反向代理打通
保持Django后端跑在 http://localhost:8000，Vue前端跑在 http://localhost:3000，通过 vue.config.js 配代理绕过跨域：
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://localhost:8000',
changeOrigin: true,
pathRewrite: { '^/api': '/api' }
}
}
}
}
这样Vue里所有 axios.get('/api/users') 实际发到Django；上线后用Nginx把 / 路由指向Vue构建产物，/api/ 路由转发给Django：
SkillSub Pro - Python 题解与代码注释双功能技能功能概述SkillSub Pro - Python 题解与代码注释双功能技能是一项面向实际任务的技能，主要用于SkillSub Pro 是一个 Python 题解生成与代码注释的 双功能合体技能 ，专为学生、算法学习者和开发者设计；✅ 一个技能，两种用途 ：；核心要点📝 题解模式 ：输入题目/题号，自动生成完整 Python 题解（含详细注释、解题思路、复杂度分析）；💬 注释模式 ：输入 Python 代码，自动添加详细中。它将相关步骤、
立即学习“Python免费学习笔记（深入）”；
location / {
alias /path/to/dist/;
try_files $uri $uri/ /index.html;
}
location /api/ {
proxy_pass http://127.0.0.1:8000/;
}
Django后端只需专注API，别碰前端路由
删掉所有 urls.py 里匹配前端页面的通配规则（比如 re_path(r'^.*$', TemplateView.as_view(template_name='index.html'))），除非你真用Django做SSR——那就不叫前后端分离了。
- API一律走
rest_framework，返回JSON，不渲染HTML - 登录态用JWT或Session Cookie，但Cookie必须带
SameSite=None; Secure（HTTPS环境下）才能被跨域前端读取 - CSRF保护对API接口无效——要么关掉
csrf_protect装饰器，要么让Vue在请求头带上X-CSRFToken（从/api/csrf/接口获取）
构建部署时，Vue输出目录别硬塞进Django工程
Vue执行 npm run build 后生成的 dist/ 是纯静态文件，Django不需要知道它存在。部署时：
- 把
dist/整个目录扔到Nginx的root下（或CDN） - 把Django部署为独立WSGI服务（Gunicorn + Nginx）
- 绝不在Django的
settings.py里配置STATIC_ROOT = '../frontend/dist'——这会让Django误以为自己要管理前端构建产物，后续升级、回滚、权限都会混乱
真正容易被忽略的是CORS头和Cookie作用域：Vue前端域名是 app.example.com，Django API是 api.example.com，这时 SESSION_COOKIE_DOMAIN='.example.com' 和 CORS_ALLOWED_ORIGINS = ['https://app.example.com'] 必须同时配对，少一个就登录失败。
