Vue.js连接Django后端需分环境配置：开发时用vue.config.js代理/api请求至Django，生产时将Vue构建产物作为静态文件由Django（或Nginx）服务；API请求须带CSRF Token（通过cookie或/csrf/接口获取），并配合django-cors-headers处理跨域及OPTIONS预检。
Vue.js 项目如何正确连接 Django 后端 API？
Django 默认不处理前端路由或静态资源，Vue.js 构建产物（dist/）必须作为纯静态文件被 Django 提供，而非由 Django 模板渲染。常见错误是把 vue-router 的 history 模式和 Django 的 URL 路由混用，导致刷新 404。
- 确保 Vue CLI 项目中
vue.config.js设置publicPath: '/static/'或相对路径（如''），避免硬编码域名 - Django 的
settings.py中配置STATIC_ROOT = BASE_DIR / 'staticfiles'，构建后运行python manage.py collectstatic - 前端请求 API 时，统一用绝对路径前缀（如
/api/v1/users/），不要依赖window.location.origin—— 开发环境和生产环境域名不同，容易跨域失败 - 开发阶段建议用 Django 开启
runserver，Vue 用npm run serve并通过devServer.proxy代理 API 请求（例如将/api/代理到<a href="https://www.php.cn/link/f0838b2ebfc6440a474eabdc326bf31a">https://www.php.cn/link/f0838b2ebfc6440a474eabdc326bf31a</a>）
Django 如何安全地支持 Vue.js 的 CSRF 和认证？
Vue.js 发起的 POST/PUT/DELETE 请求默认不携带 Django 的 csrftoken，即使用户已登录，也会触发 403 Forbidden。这不是 CORS 问题，而是 CSRF 校验失败。
- 登录成功后，Django 必须在响应头中返回
Set-Cookie: csrftoken=xxx，且CSRF_COOKIE_HTTPONLY=False（否则 JS 读不到） - 前端需在每次请求头中显式带上
X-CSRFToken：从document.cookie解析csrftoken，或更稳妥地——首次登录后调用/api/csrf/接口获取 token（该接口应禁用 CSRF 校验：@csrf_exempt） - 若使用 JWT，可绕过 CSRF，但需注意：Django REST Framework 的
TokenAuthentication不校验 CSRF，而SessionAuthentication会，二者不可混用在同一视图 - 所有 API 视图应继承
APIView而非View，并明确指定authentication_classes和permission_classes
如何让 Django 正确服务 Vue Router 的 history 模式？
Vue Router 默认 history 模式依赖服务端对所有非 API 路径返回 index.html，否则访问 /user/123 直接 404。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 不要用 Django 的
urls.py逐条匹配前端路由（如path('user/<pk>/', ...)</pk>），那是反模式 - 在 Django 的根 URL 配置末尾加一条兜底规则：
re_path(r'^.*$', TemplateView.as_view(template_name='index.html'))，但前提是该index.html已复制到templates/目录下（即 Vue 构建后的dist/index.html） - 更推荐做法：把整个
dist/当作静态资源，用 Nginx 在生产环境直接服务；开发阶段可用 Django 的serve视图临时支持，但仅限 DEBUG=True - 注意：此兜底路由必须放在所有 API 路由之后，否则会吞掉
/api/xxx请求
为什么 Axios 请求总被拦截为 OPTIONS 预检？
Vue 发起带认证头（如 Authorization）或自定义头（如 X-Requested-With）的请求时，浏览器自动发 OPTIONS 预检，而 Django 默认不响应它，导致请求卡住。
立即学习“Python免费学习笔记（深入）”；
- 安装
django-cors-headers，在settings.py中添加中间件：'corsheaders.middleware.CorsMiddleware'，并在MIDDLEWARE中置于CommonMiddleware之前 - 配置允许来源：
CORS_ALLOWED_ORIGINS = ['<a href="https://www.php.cn/link/cbb686245ece57c9827c4bc0d0654a8e">https://www.php.cn/link/cbb686245ece57c9827c4bc0d0654a8e</a>', '<a href="https://www.php.cn/link/ac63ecc6419544f4db7d546161587052">https://www.php.cn/link/ac63ecc6419544f4db7d546161587052</a>']，不要用CORS_ALLOW_ALL_ORIGINS = True（仅开发测试可用） - 若需携带凭证（cookies/token），必须同时设
CORS_ALLOW_CREDENTIALS = True，且前端 Axios 要加withCredentials: true - Django REST Framework 的
DEFAULT_PERMISSION_CLASSES不影响 OPTIONS，但中间件顺序错会导致预检失败 —— 确保CorsMiddleware在AuthenticationMiddleware之前
Django 和 Vue.js 分离的关键不在“怎么连”，而在“谁管什么”。API 归 Django，路由与交互归 Vue，静态资源交付方式决定部署复杂度。最容易被忽略的是：开发时的代理配置和生产时的静态文件路径必须严格对应，差一个斜杠或 publicPath 就会白屏。
