Vscode+Pycharm+Vue.js+WEUI+Django火锅(二）vscode Vue 热词：Vscode,Pycharm,Vue.js,WEUI,Django

1. Vscode 里 Vue 项目跑起来却连不上 Django 接口问题出在哪很多人在 Vscode 里把 Vue 项目npm run serve跑起来浏览器打开http://localhost:8080/看到欢迎页就以为前后端联调已经完成一半了。结果在组件里写了个axios.get(/api/students/)控制台直接甩出 404 或者 CORS 报错页面白屏Network 面板里请求状态码红成一片。这个场景我遇到过太多次问题往往不在 Vue 本身而在于 Vscode 里的开发服务器和 Django 后端之间缺少一层代理配置以及 Django 那边没有放行跨域请求。先把角色关系理清楚。Vue 项目通过npm run serve启动的是 webpack-dev-server默认监听 8080 端口它负责把.vue文件编译成浏览器能识别的 JS。Django 用python manage.py runserver启动默认监听 8000 端口负责处理/api/开头的业务接口。浏览器里 Vue 页面发请求时如果直接写http://localhost:8000/api/students/就属于跨域访问浏览器会拦截。正确做法是在 Vue 的开发服务器里配置 proxy把/api开头的请求转发到 8000 端口这样浏览器看到的是同源请求跨域问题自然消失。这篇内容聚焦 Vscode 与 Vue.js 的前后端联调场景延续火锅系列的多工具协作视角。你会拿到 Vscode 中 Vue 项目的可复制配置片段包括调试配置和代理设置还会看到 Django 接口联调时的验证动作与排错清单。适合已经装好 Node.js 和 Vue CLI、正在用 Vscode 写 Vue 页面、后端用 Django 提供接口的开发者。如果你还在纠结 Pycharm 社区版创建 Django 项目要敲命令行那属于上一篇的范畴这里默认 Django 项目已经能跑起来。需要提前说明的是联调过程中如果涉及模型接口调用比如在 Django 里接大模型能力做智能问答可以用 TaoToken 这类聚合平台统一管理 API Key 和模型路由省去每个模型单独申请账号的麻烦。后面会给出具体的配置方式。2. TaoToken 前置准备在 Django 里接模型接口前先拿好 Key在 Vue 和 Django 联调的过程中有一种常见需求是 Django 后端需要调用大模型接口比如做一个智能批改或者对话功能然后 Vue 前端通过/api/chat/这样的接口拿结果。这时候 Django 里要配置模型服务的 Base URL 和 API Key。TaoToken 的作用是把多个模型的调用统一到一个入口你只需要一个 Key 就能切换不同模型不用在代码里写死某一家厂商的地址。先打开官网 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 注册账号然后进入控制台创建 API Key。控制台地址是 https://taotoken.net/console?utm_sourcetaotoken_aicg_blog_endutm_contentconsoleutm_campaignrewrite 在 API Keys 页面点击创建复制生成的 Key格式类似sk-开头的一串字符。这个 Key 要放到 Django 的环境变量里不要直接写死在settings.py中避免提交到代码仓库。TaoToken 的 API 入口是 https://taotoken.net/api 它兼容 OpenAI 的接口格式所以 Django 里可以用openai这个 Python 包来调用只需要把base_url改成 TaoToken 的地址。模型 ID 根据你实际使用的模型来填比如gpt-4o、claude-3-5-sonnet等具体以控制台模型列表为准。如果你打算长期在 Vscode 里做编码和 Agent 开发可以了解一下 Coding Plan地址是 https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding-planutm_campaignrewrite 它针对代码场景做了额度优化。在 Django 项目根目录下新建.env文件写入两行TAOTOKEN_API_KEYsk-你的实际Key TAOTOKEN_BASE_URLhttps://taotoken.net/api然后在settings.py里读取import os from dotenv import load_dotenv load_dotenv() TAOTOKEN_API_KEY os.getenv(TAOTOKEN_API_KEY) TAOTOKEN_BASE_URL os.getenv(TAOTOKEN_BASE_URL)这样 Django 视图里就能通过settings.TAOTOKEN_API_KEY拿到 Key。如果你用的是 Claude Code 这类工具做代码辅助它的配置方式不太一样需要设置ANTHROPIC_BASE_URL和ANTHROPIC_API_KEY具体可以参考接入文档 https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite 。不过这篇的重点是 Vscode 里 Vue 和 Django 的联调模型接口只是其中一个可能用到的环节先把 Key 准备好后面在 Django 视图里调用时直接引用即可。3. Vscode 中 Vue 项目的可复制配置片段代理与调试Vscode 打开 Vue 项目文件夹后真正影响联调体验的是两个配置文件vue.config.js和.vscode/launch.json。前者负责开发服务器的代理转发后者负责 Vscode 里的断点调试。很多人只配了其中一个结果要么请求 404要么断点打不上。先看vue.config.js。这个文件默认不存在需要在项目根目录手动创建和package.json同级。Vue CLI 5.x 创建的项目用的是 webpack 5代理配置写在devServer.proxy里。下面是一份可以直接复制的配置假设 Django 跑在 8000 端口const { defineConfig } require(vue/cli-service) module.exports defineConfig({ transpileDependencies: true, devServer: { port: 8080, proxy: { /api: { target: http://127.0.0.1:8000, changeOrigin: true, ws: false, pathRewrite: { ^/api: /api } } } } })这里有几个参数需要解释。target写 Django 的实际地址用127.0.0.1比localhost更稳避免某些系统下 IPv6 解析问题。changeOrigin: true表示把请求头里的 Host 改成目标地址Django 的ALLOWED_HOSTS校验才不会拦。pathRewrite这里保持/api前缀不变因为 Django 的urls.py里通常也是以api/开头。如果你的 Django 接口没有api前缀那就把^/api: 写进去把前缀去掉。配好之后重启npm run serveVscode 终端里会看到代理生效的提示。这时候在 Vue 组件里写请求import axios from axios export default { methods: { async fetchStudents() { const res await axios.get(/api/students/) console.log(res.data) } } }注意 URL 写的是/api/students/不是http://localhost:8000/api/students/。浏览器发出的请求会先到 8080再由 devServer 转发到 8000Network 面板里看到的请求地址是http://localhost:8080/api/students/状态码 200跨域问题不会出现。接下来配 Vscode 的调试。在项目根目录新建.vscode/launch.json内容如下{ version: 0.2.0, configurations: [ { type: chrome, request: launch, name: Vue: Chrome 调试, url: http://localhost:8080, webRoot: ${workspaceFolder}/src, breakOnLoad: true, sourceMapPathOverrides: { webpack:///./src/*: ${webRoot}/* } } ] }这个配置的作用是让 Vscode 启动一个 Chrome 实例打开 8080 端口并且把源码映射到src目录。你在.vue文件里打的断点会在 Chrome 里命中Vscode 里能直接看到变量值。breakOnLoad设为 true 可以在页面加载时就断住适合调试created或mounted钩子里的逻辑。如果用的是 Edge把type改成msedge即可。还有一个容易忽略的点Vscode 的 ESLint 插件和 Vetur 插件。Vetur 负责.vue文件的语法高亮和模板提示ESLint 负责代码规范检查。在扩展市场搜索 Vetur 安装后打开.vue文件template、script、style三块区域会有不同的颜色区分代码可读性明显提升。如果你用的是 Vue 3 加 TypeScript建议换成 Volar不过这篇以 Vue 2 风格的 Vue CLI 项目为主Vetur 够用。配置完成后Vscode 里的开发体验就完整了写代码有高亮和提示保存自动编译浏览器里断点调试请求通过代理打到 Django。这套组合在 Windows 和 macOS 上都能跑路径分隔符不用改Vscode 会自动处理。4. 验证请求与成功结果从 Vue 页面到 Django 接口的完整链路配置写完之后必须做一次端到端的验证确认请求真的能打到 Django 并拿到数据。很多人配了代理但没验证等到写业务代码时才发现接口 404回头排查成本更高。下面按步骤走一遍。第一步确认 Django 服务在跑。打开一个终端进入 Django 项目目录执行python manage.py runserver 8000看到Starting development server at http://127.0.0.1:8000/就说明后端就绪。如果 8000 端口被占用换一个端口比如 8001同时把vue.config.js里的target改成对应端口。第二步在 Django 里准备一个测试接口。假设你有一个students应用在views.py里写一个最简单的 JSON 返回from django.http import JsonResponse def student_list(request): data { code: 0, msg: ok, data: [ {id: 1, name: 张三, score: 92}, {id: 2, name: 李四, score: 88} ] } return JsonResponse(data)在urls.py里注册路由from django.urls import path from . import views urlpatterns [ path(api/students/, views.student_list), ]第三步确认 Django 的ALLOWED_HOSTS和 CORS 配置。因为请求经过代理后Django 收到的 Host 是127.0.0.1:8000所以settings.py里要有ALLOWED_HOSTS [127.0.0.1, localhost]如果没装django-cors-headers代理模式下其实不需要 CORS因为浏览器看到的是同源。但如果你在 Vscode 里直接用http://localhost:8000/api/students/测试那就需要 CORS 放行。建议装上配置如下INSTALLED_APPS [ ... corsheaders, ] MIDDLEWARE [ corsheaders.middleware.CorsMiddleware, ... ] CORS_ALLOWED_ORIGINS [ http://localhost:8080, http://127.0.0.1:8080, ]第四步在 Vue 组件里发请求并渲染。修改src/components/HelloWorld.vue或者新建一个组件template div h3学生列表/h3 ul li v-foritem in students :keyitem.id {{ item.name }} - {{ item.score }} /li /ul /div /template script import axios from axios export default { data() { return { students: [] } }, async created() { try { const res await axios.get(/api/students/) if (res.data.code 0) { this.students res.data.data } } catch (err) { console.error(请求失败, err) } } } /script第五步重启npm run serve浏览器打开http://localhost:8080。如果页面上出现「张三 - 92」和「李四 - 88」说明整条链路通了。打开浏览器开发者工具的 Network 面板找到students/这个请求Request URL 显示http://localhost:8080/api/students/Status 200Response 里是 JSON 数据。再切到 Vscode 终端Django 那边会打印出[28/Sep/2024 10:15:30] GET /api/students/ HTTP/1.1 200说明请求确实转发到了后端。如果页面没数据先看 Network 面板的状态码。404 说明代理路径或 Django 路由不对500 说明 Django 视图里有异常去看终端报错CORS 错误说明请求没走代理检查 axios 的 URL 是不是写成了绝对地址。这一步验证通过后后面加业务接口就是重复同样的模式。5. 本篇常见错排查401、proxy failed、reading choices 与 OAuth联调过程中遇到的报错往往有固定套路下面按真实场景列几个高频问题对照着排查能省不少时间。报错一401 Unauthorized提示 invalid api key这个通常出现在 Django 调用 TaoToken 模型接口时。检查.env文件里的TAOTOKEN_API_KEY是否复制完整有没有多余空格。然后在 Django shell 里验证python manage.py shellfrom django.conf import settings print(settings.TAOTOKEN_API_KEY[:10])如果打印出来是None说明load_dotenv()没生效检查.env文件是否在manage.py同级目录以及python-dotenv是否安装。如果 Key 正确但依然 401去控制台确认这个 Key 是否被禁用或额度耗尽。TaoToken 的 API 入口是https://taotoken.net/api注意不要写成带 UTM 的地址接口调用不需要那些参数。报错二local proxy failed或者 proxy error: ECONNREFUSED这是 Vue devServer 代理转发失败。原因通常是 Django 没启动或者target地址写错。先确认 Django 终端里有没有Starting development server再用浏览器直接访问http://127.0.0.1:8000/api/students/如果能返回 JSON说明后端正常问题在代理配置。检查vue.config.js里的target端口是否和 Django 一致改完必须重启npm run serve热更新不会重新加载代理配置。报错三Cannot read properties of undefined (reading choices)这个报错常见于调用模型接口后解析响应时。OpenAI 格式的响应里choices在response.choices[0].message.content但如果请求失败返回了错误对象choices就是 undefined。在 Django 视图里加一层判断import openai from django.conf import settings client openai.OpenAI( api_keysettings.TAOTOKEN_API_KEY, base_urlsettings.TAOTOKEN_BASE_URL ) def chat_view(request): try: resp client.chat.completions.create( modelgpt-4o, messages[{role: user, content: 你好}] ) content resp.choices[0].message.content return JsonResponse({code: 0, data: content}) except Exception as e: return JsonResponse({code: 1, msg: str(e)})这样即使接口报错前端也能拿到可读的错误信息而不是在 JS 里报reading choices。报错四OAuth 相关错误或者 Claude Code 提示认证失败如果你在 Vscode 里用 Claude Code 做代码辅助它的认证方式和普通 API Key 不同。需要设置环境变量ANTHROPIC_BASE_URL为 TaoToken 的地址ANTHROPIC_API_KEY为你的 Key。具体配置参考接入文档 https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite 。如果出现 OAuth 报错检查是不是混用了两套认证方式Claude Code 走的是 Anthropic 协议不要和 OpenAI 格式的 Key 混用。报错五npm install 时 ECONNRESET 或 CERT_HAS_EXPIRED这个在上一篇里出现过根源是 npm 默认源或旧淘宝源不可用。解决办法是切换镜像npm config set registry https://registry.npmmirror.com然后重新执行npm install -g vue/cli。如果之前装过 cnpm用cnpm install -g vue/cli也可以。装完后vue --version确认版本Vue CLI 5.x 对应vue/cli 5.0.8左右。排查的核心思路是分层定位先确认后端接口能独立访问再确认代理转发是否生效最后看前端代码的请求路径和错误处理。每一层都有对应的验证命令不要跳步。6. 继续联调把配置沉淀成模板下次直接复用Vscode 加 Vue 加 Django 的联调配置本质上就是几个文件的组合vue.config.js管代理.vscode/launch.json管调试.env管密钥Django 的settings.py管跨域和路由。这套配置一旦跑通下次新建项目时直接复制过去改一下端口和路径就能用。我自己的习惯是在项目根目录放一个dev-notes.md把当前项目的端口分配、代理规则、模型 ID 记下来。比如 Vue 跑 8080Django 跑 8000TaoToken 用的模型是gpt-4o这些信息在切换项目时很容易混。Vscode 的工作区设置里也可以把常用的终端命令存成任务在.vscode/tasks.json里配两个任务一个启动 Django一个启动 Vue按CtrlShiftB就能同时跑起来。如果你在联调时遇到模型接口的额度或路由问题去控制台 https://taotoken.net/console?utm_sourcetaotoken_aicg_blog_endutm_contentconsoleutm_campaignrewrite 看调用日志每个请求的模型、耗时、状态都有记录。需要新建 Key 就去 API Keys 页面 https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi-keysutm_campaignrewrite 建议按项目分 Key方便排查和回收。模型对话调试可以用 https://taotoken.net/chat?utm_sourcetaotoken_aicg_blog_endutm_contentchatutm_campaignrewrite 快速验证提示词效果确认没问题再写进 Django 视图。最后提醒一点代理配置里的pathRewrite和 Django 的urls.py前缀要对应上。我见过有人代理写/api转发到 8000但 Django 路由是students/没有api前缀结果 404 排查了半天。两边对齐之后联调就是水到渠成的事。