用 TaoToken 搭 Vite + Vue 知识图谱网站第一天：跑通 Hello World

1. 从零搭一个知识图谱网站第一天到底要做什么如果你也在做「段永平投资理财知识图谱」这类项目第一天最该做的不是画图而是把工程底座跑通。Vite Vue 是目前前端起步最省心的组合之一Vite 负责秒级启动和热更新Vue 负责把页面拆成可维护的组件。今天的目标很明确——初始化项目、接上 TaoToken 的统一 Key/API 通道、让浏览器里出现一个能正常渲染的 Hello World 页面。很多人卡在第一步不是因为不会写代码而是环境、依赖、Key 管理三件事混在一起报错后不知道从哪查。我试过把 Key 直接写死在组件里结果换模型时改了七八个文件非常痛苦。所以这篇会把 TaoToken 的接入配置单独抽出来做成一个可复用的骨架后面 Day 2 到 Day 7 做 graphData、D3 力导向图、ArticleReader 时都能直接调用。适合谁看非软件专业但想用 AI 做产品的人、刚接触 Vue 的前端新手、准备做知识图谱/数据可视化网站的同学。全程命令可复制配置可照抄最后用浏览器访问验证确保你有一个稳定的开发底座再往下走。2. TaoToken 前置准备统一 Key 与 API 通道TaoToken 在这里扮演的角色是「统一入口」你不需要在项目里为每个模型单独维护一套地址和密钥而是通过一个 Key 走同一个 API 通道。官网地址是 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content API 根地址是 https://taotoken.net/api 。第一步打开控制台创建 API Key。入口在 https://taotoken.net/console?utm_sourcetaotoken_aicg_blog_endutm_contentconsoleutm_campaignrewrite 登录后新建一个 Key复制保存。注意Key 只显示一次丢了就重新建。第二步如果你还不确定用哪个模型可以先到模型对话页面试一下效果地址是 https://taotoken.net/chat?utm_sourcetaotoken_aicg_blog_endutm_contentmodel_chatutm_campaignrewrite 。在对话里发一句「你好帮我确认通道是否正常」能返回内容就说明 Key 和通道都没问题。第三步把 Key 写进项目环境变量而不是硬编码。Vite 默认只暴露以VITE_开头的变量所以我们在项目根目录建一个.env.localVITE_TAOTOKEN_API_KEY你的Key VITE_TAOTOKEN_BASE_URLhttps://taotoken.net/api注意.env.local要加进.gitignore别把 Key 提交到仓库。团队协作时每人本地一份互不覆盖。如果你后面要做长期编码或 Agent 类任务可以了解 Coding Plan入口是 https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding_planutm_campaignrewrite 。接入文档在 https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite API Keys 管理页在 https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi_keysutm_campaignrewrite 。这几个地址建议先收藏后面排障会反复用到。3. 可复制配置初始化 Vite Vue 项目先确认本机 Node 版本Vite 5 要求 Node 18 以上node -v npm -v如果版本太低去 Node 官网装 LTS 版本。然后创建项目项目名用duan-yongping-kgnpm create vitelatest duan-yongping-kg -- --template vue cd duan-yongping-kg npm install这三条命令做完你会得到一个标准的 Vue 3 项目结构。核心文件是src/main.js、src/App.vue、index.html。接着安装我们后面要用的依赖今天先装 axios 用于请求npm install axios然后在src下新建一个api目录放统一请求封装src/api/client.jsimport axios from axios const client axios.create({ baseURL: import.meta.env.VITE_TAOTOKEN_BASE_URL, timeout: 30000, headers: { Content-Type: application/json, Authorization: Bearer ${import.meta.env.VITE_TAOTOKEN_API_KEY} } }) export default client再建一个src/api/chat.js封装一个最小的对话调用方便验证通道import client from ./client export async function chatOnce(prompt) { const res await client.post(/v1/chat/completions, { model: gpt-4o-mini, messages: [{ role: user, content: prompt }] }) return res.data }提示模型名按你实际可用的填写不确定就先在模型对话页面确认。请求路径以接入文档为准不同模型可能略有差异。最后改src/App.vue做一个 Hello World 加一个「测试通道」按钮script setup import { ref } from vue import { chatOnce } from ./api/chat const msg ref(Hello World知识图谱第一天) const result ref() async function testApi() { try { const data await chatOnce(用一句话介绍你自己) result.value data.choices?.[0]?.message?.content || 返回结构异常 } catch (e) { result.value 请求失败 (e.response?.status || e.message) } } /script template main h1{{ msg }}/h1 button clicktestApi测试 TaoToken 通道/button p{{ result }}/p /main /template4. 启动与验证浏览器里看到成功结果配置写完启动开发服务器npm run dev终端会输出类似Local: http://localhost:5173/的地址。打开浏览器访问你应该看到页面标题「Hello World知识图谱第一天」和一个按钮。点击按钮如果下方出现模型返回的一句话说明 Vite Vue TaoToken 三者已经打通。这一步的成功标志有三个页面正常渲染、控制台无红色报错、按钮点击后返回文本。如果只看到页面但按钮报错先看浏览器 Network 面板里请求的 URL 和状态码再对照接入文档检查路径和模型名。实测下来最容易出问题的是环境变量没生效。Vite 修改.env.local后必须重启npm run dev否则读到的还是旧值。另外import.meta.env在浏览器里可以直接打印临时加一行console.log(import.meta.env.VITE_TAOTOKEN_BASE_URL)就能确认。5. 本篇常见错排查报错一Failed to resolve import axios说明依赖没装成功。删掉node_modules和package-lock.json重新npm install。国内网络慢可以换镜像源但不要用任何来路不明的代理工具。报错二请求返回 401Key 无效或没带上。检查.env.local里VITE_TAOTOKEN_API_KEY是否有多余空格检查client.js里 Authorization 头拼写。改完重启服务。报错三请求返回 404路径或模型名不对。到接入文档确认/v1/chat/completions是否为你所用模型的正确路径模型名是否在可用列表里。报错四页面白屏控制台报process is not defined说明你在浏览器代码里用了 Node 的process.env。Vite 里必须用import.meta.env全局替换即可。报错五端口被占用npm run dev报Port 5173 is in use。可以npm run dev -- --port 5174换端口或关掉占用进程。注意排障时优先看浏览器控制台和 Network 面板再看终端日志。90% 的问题在 Network 里能直接定位。6. 下一步怎么走第一天跑通 Hello World 后你的项目已经具备Vite 构建、Vue 组件、统一 API 封装、环境变量管理。Day 2 就可以开始设计graphData.js用一小撮段永平相关的节点和关系数据为后面的 D3 力导向图做准备。如果你在接入阶段遇到 Key 或通道问题直接去 API Keys 页面重新生成一个再试https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi_keysutm_campaignrewrite 。需要确认模型返回是否正常用模型对话页面最快https://taotoken.net/chat?utm_sourcetaotoken_aicg_blog_endutm_contentmodel_chatutm_campaignrewrite 。后面要做长期编码任务再考虑 Coding Planhttps://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding_planutm_campaignrewrite 。把今天的命令和配置存成一个setup.md放进项目根目录下次换电脑或重装环境照着跑一遍就能恢复。这个习惯在 Day 4 攻克 D3 力导向图时会帮你省下大量时间。