企业官网建设流程全解析

1. 为什么 AI 取名应用总卡在“Key 配置”这一步

做 Vue 3 + TypeScript 的 AI 取名应用，功能本身不复杂：用户填姓氏、出生日期、性别，前端拼一段提示词，调用大模型返回几个带五行、生肖、寓意解释的名字。真正让人头疼的是模型接入环节。我试过在一个项目里同时用三家模型服务：Cursor 里写代码用一家，取名接口联调用另一家，本地跑 Agent 又换一家，结果就是.env文件里塞了四五个 Key，settings.json里模型名和 Base URL 对不上，改一次配置要翻三个后台。

这篇就围绕「Vue 3 + Cursor 全流程开发 AI 取名应用」这个场景，把多模型 Key 分散的问题收敛成一套统一 Key 方案。核心思路是：用 TaoToken 作为统一的模型接入层，Cursor 的settings.json和前端取名接口都指向同一个 Base URL 和同一个 Key，一次配置跑通从写代码到联调的全流程。

适合谁看：正在用 Cursor 写 Vue 3 项目、需要在前端接大模型能力、又被多 Key 配置搞烦的前端同学。读完你能拿到一份可直接复制的 Cursor 配置骨架、一套取名接口的联调代码，以及本地验证的具体动作。

TaoToken 在这里的角色是「统一入口」：它提供 OpenAI 兼容的 API 格式，Cursor 和你的 Vue 前端都能用同一套baseURL + apiKey去请求，不用为每个模型单独记地址。官网入口在 https://taotoken.net/?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content= ，API 地址是 https://taotoken.net/api ，注意 API 路径不带 UTM 参数。

2. 前置准备：TaoToken 统一 Key 与 Cursor 环境

2.1 拿到统一 Key

先去控制台创建一个 API Key。整个流程只需要这一个 Key，后面 Cursor 和前端都用它。创建入口在 https://taotoken.net/console?utm_source=taotoken_aicg_blog_end&utm_content=console&utm_campaign=rewrite ，Key 管理页面在 https://taotoken.net/api-keys?utm_source=taotoken_aicg_blog_end&utm_content=api-keys&utm_campaign=rewrite 。生成后复制保存，形如sk-xxxx，只显示一次。

注意：Key 不要提交到 Git 仓库。前端项目里用.env.local存，.gitignore里加上.env*.local。

2.2 Cursor 环境确认

Cursor 已安装，Node.js 建议 v18 以上（Vue 3 + Vite 对 Node 版本有要求），包管理器用 pnpm 或 npm 都行。确认版本：

node -v pnpm -v

如果还没装 pnpm，npm install -g pnpm即可。Cursor 的中文界面在设置里可以切换，不影响配置。

2.3 项目初始化

用 Vite 起一个 Vue 3 + TypeScript 骨架，比手动建目录快：

pnpm create vite ai-name-generator --template vue-ts cd ai-name-generator pnpm install pnpm add pinia vue-router

装完先pnpm dev跑一下，确认默认页面能打开，再进 Cursor 打开这个文件夹。这一步别省，先确认基础环境没问题，后面排查配置错误时能排除掉项目本身的干扰。

3. Cursor settings.json 可复制配置骨架

Cursor 的模型配置分两块：一块是 Cursor 自身用来做代码补全和对话的模型，另一块是你在项目里调用的外部 API。这里重点是把 Cursor 的模型接入指向 TaoToken，让写代码时的 AI 辅助和前端取名接口共用一套凭证。

3.1 打开 settings.json

Cursor 里按Ctrl+Shift+P（Mac 是Cmd+Shift+P），输入Open Settings (JSON)，打开用户级settings.json。也可以从设置界面右上角的图标进入。下面是一份可复制的配置骨架：

{ "cursor.cpp.enablePartialAccepts": true, "cursor.general.enableShadowWorkspace": true, "models": { "custom": [ { "name": "taotoken-gpt", "provider": "openai", "baseUrl": "https://taotoken.net/api/v1", "apiKey": "sk-你的TaoToken密钥", "model": "gpt-4o-mini" }, { "name": "taotoken-claude", "provider": "openai", "baseUrl": "https://taotoken.net/api/v1", "apiKey": "sk-你的TaoToken密钥", "model": "claude-3-5-sonnet" } ] }, "cursor.chat.defaultModel": "taotoken-gpt" }

几个关键点说明。baseUrl填https://taotoken.net/api/v1，注意结尾的/v1，OpenAI 兼容接口通常需要它。provider统一写openai，因为 TaoToken 走的是 OpenAI 兼容协议，即使底层模型是 Claude 也这样填。model字段填具体模型名，按你实际要用的填，不确定就先填一个通用对话模型。

注意：不同 Cursor 版本对自定义模型的字段名可能有差异，如果models.custom不生效，检查你的 Cursor 版本是否支持自定义 provider。较新版本在设置界面的 Models 面板里也能直接加，字段含义一致。

3.2 用环境变量替代硬编码

把 Key 直接写进settings.json不够安全，尤其是多人协作或截图分享时。更稳妥的做法是 Cursor 支持读取环境变量，在系统里设一个TAOTOKEN_API_KEY，配置里引用它：

{ "models": { "custom": [ { "name": "taotoken-gpt", "provider": "openai", "baseUrl": "https://taotoken.net/api/v1", "apiKey": "${env:TAOTOKEN_API_KEY}", "model": "gpt-4o-mini" } ] } }

这样settings.json可以放心提交到团队仓库，Key 留在各自机器上。设置环境变量的方式按系统不同，Linux/macOS 在~/.zshrc或~/.bashrc里加export TAOTOKEN_API_KEY=sk-xxx，Windows 在系统环境变量里加。

3.3 验证 Cursor 侧配置生效

配置改完重启 Cursor，打开 Chat 面板，模型下拉里应该能看到taotoken-gpt。选它，随便问一句「用 Vue 3 写一个 ref 的示例」，能正常返回就说明 Cursor 侧的接入通了。如果报 401，多半是 Key 错了或没生效；报 404，检查baseUrl是不是漏了/v1。

4. 取名接口联调：Vue 3 前端调用统一 Key

Cursor 配置通了，接下来是应用本身。取名功能的核心是前端拼提示词、调模型、解析返回。这里给一套可跑的联调代码。

4.1 封装请求模块

在src/utils/下建ai-client.ts，把 Base URL 和 Key 集中管理：

// src/utils/ai-client.ts const BASE_URL = import.meta.env.VITE_TAOTOKEN_BASE_URL || 'https://taotoken.net/api/v1' const API_KEY = import.meta.env.VITE_TAOTOKEN_API_KEY || '' export interface ChatMessage { role: 'system' | 'user' | 'assistant' content: string } export async function chatCompletion( messages: ChatMessage[], model = 'gpt-4o-mini' ): Promise<string> { const res = await fetch(`${BASE_URL}/chat/completions`, { method: 'POST', headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${API_KEY}` }, body: JSON.stringify({ model, messages, temperature: 0.8 }) }) if (!res.ok) { const errText = await res.text() throw new Error(`请求失败 ${res.status}: ${errText}`) } const data = await res.json() return data.choices?.[0]?.message?.content ?? '' }

在项目根目录建.env.local：

VITE_TAOTOKEN_BASE_URL=https://taotoken.net/api/v1 VITE_TAOTOKEN_API_KEY=sk-你的TaoToken密钥

Vite 只会把VITE_前缀的变量暴露给前端，这是有意为之的安全边界。但要注意，纯前端应用里 Key 最终会打包进产物，任何人打开 DevTools 都能看到。生产环境更稳妥的做法是加一层自己的后端转发，前端只调自己的接口。这里为了演示全流程先用前端直连，上线前记得换。

4.2 取名逻辑与提示词

在src/utils/name-generator.ts里写取名函数：

import { chatCompletion } from './ai-client' export interface NameRequest { surname: string birthDate: string gender: '男' | '女' } export interface NameResult { fullName: string elements: string zodiac: string meaning: string } export async function generateNames(req: NameRequest): Promise<NameResult[]> { const systemPrompt = `你是一位精通姓名学的中文取名助手。 根据用户提供的姓氏、出生日期、性别，生成 3 个吉祥名字。 每个名字必须包含：名字全称、五行属性、生肖适配说明、寓意解释。 严格返回 JSON 数组，不要输出任何多余文字，格式如下： [{"fullName":"","elements":"","zodiac":"","meaning":""}]` const userPrompt = `姓氏：${req.surname} 出生日期：${req.birthDate} 性别：${req.gender} 请生成 3 个名字。` const content = await chatCompletion([ { role: 'system', content: systemPrompt }, { role: 'user', content: userPrompt } ]) const cleaned = content.replace(/```json|```/g, '').trim() return JSON.parse(cleaned) as NameResult[] }

提示词里强调「严格返回 JSON 数组」很关键，否则模型容易加一堆解释文字，前端JSON.parse直接崩。即使这样，也建议加一层容错，把返回内容里的代码块标记清掉再解析。

4.3 页面里调用

在取名页组件里接上：

<script setup lang="ts"> import { ref } from 'vue' import { generateNames, type NameResult } from '@/utils/name-generator' const surname = ref('') const birthDate = ref('') const gender = ref<'男' | '女'>('男') const loading = ref(false) const results = ref<NameResult[]>([]) const errorMsg = ref('') async function handleGenerate() { if (!surname.value || !birthDate.value) { errorMsg.value = '请填写姓氏和出生日期' return } loading.value = true errorMsg.value = '' try { results.value = await generateNames({ surname: surname.value, birthDate: birthDate.value, gender: gender.value }) } catch (e) { errorMsg.value = e instanceof Error ? e.message : '生成失败，请重试' } finally { loading.value = false } } </script>

模板部分按需渲染results，每个卡片展示fullName、elements、zodiac、meaning四个字段。这样取名接口的联调链路就完整了：表单输入 → 拼提示词 → 调 TaoToken → 解析 JSON → 渲染卡片。

5. 本地验证与成功结果确认

配置和代码都就位后，跑一遍完整验证。启动项目：

pnpm dev

浏览器打开终端输出的地址，通常是http://localhost:5173。填一个姓氏比如「李」，出生日期选一个过去的日期，性别选男，点生成。正常情况下 2 到 5 秒内返回 3 张名字卡片，每张都有五行、生肖、寓意。

如果想让验证更可控，可以先用 curl 直接打接口，排除前端代码的干扰：

curl https://taotoken.net/api/v1/chat/completions \ -H "Content-Type: application/json" \ -H "Authorization: Bearer sk-你的TaoToken密钥" \ -d '{ "model": "gpt-4o-mini", "messages": [ {"role": "user", "content": "用一句话解释什么是五行"} ] }'

返回里能看到choices[0].message.content就说明 Key 和地址都没问题。这一步通了，前端还报错，问题就锁定在前端代码或环境变量上。

验证清单可以按这个顺序过：curl 直连通不通 →.env.local变量有没有被 Vite 读到（在组件里console.log(import.meta.env.VITE_TAOTOKEN_API_KEY)看输出）→ 前端请求的 URL 拼得对不对（Network 面板看实际请求地址）→ 返回内容能不能被JSON.parse。一层层往下排，比盲目改代码快得多。

6. 本篇常见错误排查

6.1 401 Unauthorized

最常见。三种可能：Key 复制时带了空格或换行；.env.local改了没重启 dev server（Vite 读环境变量在启动时，改完要重启）；Cursor 的settings.json里 Key 没生效。逐个确认，Key 建议重新复制一次，别手动敲。

6.2 404 Not Found

基本是baseUrl路径问题。TaoToken 的 API 地址是https://taotoken.net/api，OpenAI 兼容接口要拼到https://taotoken.net/api/v1。少写/v1或写成/api/v1/（结尾多斜杠）都可能 404。检查配置里的完整 URL。

6.3 JSON 解析失败

模型返回了带解释文字的内容，JSON.parse报Unexpected token。解决办法是在提示词里更强调「只返回 JSON」，同时在解析前做清洗，把```json和```去掉。更稳的做法是用正则提取第一个[到最后一个]之间的内容再解析。

6.4 CORS 跨域报错

浏览器控制台出现blocked by CORS policy。纯前端直连第三方 API 时，如果对方没开 CORS 就会这样。TaoToken 的接口支持浏览器直接调用，如果仍遇到，检查是不是请求头里多带了自定义字段触发了预检。实在不行就加一层本地代理，Vite 的server.proxy配置可以转发请求。

6.5 模型名不存在

报model not found或类似错误。model字段要填服务端实际支持的模型名，别填成 Cursor 里的自定义别名。不确定支持哪些，去文档页查一下 https://taotoken.net/doc?utm_source=taotoken_aicg_blog_end&utm_content=doc&utm_campaign=rewrite ，里面有可用模型列表。

6.6 Cursor 里模型下拉不显示

改完settings.json没重启 Cursor，或者 JSON 格式有语法错误（多逗号、少引号）。用编辑器的 JSON 校验看一眼，红色波浪线就是有问题。重启后还不显示，检查 Cursor 版本是否支持自定义 provider。

7. 把配置沉淀成可复用方案

整套流程跑通后，你会发现真正省事的地方在于「一套 Key 走到底」。Cursor 写代码用它，前端取名接口用它，以后加个历史记录总结、名字寓意扩写之类的功能，还是同一个 Key、同一个 Base URL，不用再翻后台找凭证。

如果后面要长期在这个项目上做编码和 Agent 类功能，可以了解下 Coding Plan，入口在 https://taotoken.net/coding-plan?utm_source=taotoken_aicg_blog_end&utm_content=coding-plan&utm_campaign=rewrite ，适合需要稳定额度跑开发任务的场景。想先快速验证模型对话效果，模型对话页在 https://taotoken.net/?utm_source=taotoken_aicg_blog_end&utm_content=model-chat&utm_campaign=rewrite 。接入过程中遇到具体报错，接入文档在 https://taotoken.net/doc?utm_source=taotoken_aicg_blog_end&utm_content=doc&utm_campaign=rewrite ，Key 管理在 https://taotoken.net/api-keys?utm_source=taotoken_aicg_blog_end&utm_content=api-keys&utm_campaign=rewrite 。

最后留一个实操建议：把.env.local和 Cursor 的settings.json配置模板一起放进项目的docs/目录，新同学拉下代码照着填 Key 就能跑，比口头讲一遍快。取名应用本身不复杂，把配置这层理顺了，剩下的就是调提示词和打磨交互。