企业官网建设流程全解析

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_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content= 注册账号，然后进入控制台创建 API Key。控制台地址是 https://taotoken.net/console?utm_source=taotoken_aicg_blog_end&utm_content=console&utm_campaign=rewrite ，在 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_source=taotoken_aicg_blog_end&utm_content=coding-plan&utm_campaign=rewrite ，它针对代码场景做了额度优化。

在 Django 项目根目录下新建.env文件，写入两行：

TAOTOKEN_API_KEY=sk-你的实际Key TAOTOKEN_BASE_URL=https://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_source=taotoken_aicg_blog_end&utm_content=doc&utm_campaign=rewrite 。不过这篇的重点是 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 serve，Vscode 终端里会看到代理生效的提示。这时候在 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 转发到 8000，Network 面板里看到的请求地址是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-for="item in students" :key="item.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 200，Response 里是 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 shell

from 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_key=settings.TAOTOKEN_API_KEY, base_url=settings.TAOTOKEN_BASE_URL ) def chat_view(request): try: resp = client.chat.completions.create( model="gpt-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_source=taotoken_aicg_blog_end&utm_content=doc&utm_campaign=rewrite 。如果出现 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 跑 8080，Django 跑 8000，TaoToken 用的模型是gpt-4o，这些信息在切换项目时很容易混。Vscode 的工作区设置里也可以把常用的终端命令存成任务，在.vscode/tasks.json里配两个任务，一个启动 Django，一个启动 Vue，按Ctrl+Shift+B就能同时跑起来。

如果你在联调时遇到模型接口的额度或路由问题，去控制台 https://taotoken.net/console?utm_source=taotoken_aicg_blog_end&utm_content=console&utm_campaign=rewrite 看调用日志，每个请求的模型、耗时、状态都有记录。需要新建 Key 就去 API Keys 页面 https://taotoken.net/api-keys?utm_source=taotoken_aicg_blog_end&utm_content=api-keys&utm_campaign=rewrite ，建议按项目分 Key，方便排查和回收。模型对话调试可以用 https://taotoken.net/chat?utm_source=taotoken_aicg_blog_end&utm_content=chat&utm_campaign=rewrite 快速验证提示词效果，确认没问题再写进 Django 视图。

最后提醒一点，代理配置里的pathRewrite和 Django 的urls.py前缀要对应上。我见过有人代理写/api转发到 8000，但 Django 路由是students/没有api前缀，结果 404 排查了半天。两边对齐之后，联调就是水到渠成的事。