企业官网建设流程全解析

1. Vue 项目从本地到 Nginx：为什么 Key 总是散落在各处

做 Vue 项目的人大多经历过这个阶段：VSCode 里装了 AI 补全插件，Node 脚本里调了一次模型接口，本地调试时又写死了一个 Key，等到 Nginx 部署上线，发现前端打包产物里还残留着不该出现的密钥。三个环境、四份配置、五处 Key，改一次要翻半天。

这篇要解决的就是这条链路：Vue CLI 项目在 VSCode 里编码、Node 本地调试、最后 Nginx 反向代理上线，全程用 TaoToken 统一管理 API Key。TaoToken 是一个聚合多家大模型能力的 API 通道，你只需要申请一个 Key，就能在 VSCode 插件、Node 脚本、前端请求里复用同一套凭证，不用为每个工具单独开户。适合正在做 Vue 全栈开发、被多套 Key 折腾过的同学。

我会给出三份可直接复制的骨架：VSCode 的settings.json、Node 的.env环境变量文件、Nginx 的location反向代理配置，再带你走一遍本地请求经 TaoToken 验证连通性的完整步骤。踩过的坑也会一并说清楚，比如为什么前端不能直接暴露 Key、Nginx 转发时哪些请求头必须保留。

2. 前置准备：拿到 TaoToken Key 并理清三个环境的关系

在动手改配置之前，先把凭证和调用地址准备好。TaoToken 的 API 入口是https://taotoken.net/api，注意这个地址不带任何查询参数，是纯粹的接口根路径。你需要先注册账号，然后在控制台创建一个 API Key。

创建 Key 的入口在这里：

控制台地址：https://taotoken.net/console?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content=console

进去之后找到 API Keys 页面，新建一个 Key，复制出来先存到密码管理器里。这个 Key 就是后面 VSCode、Node、Nginx 三处共用的那一把。

理一下三个环境各自扮演什么角色。VSCode 是编码环境，插件通过它发起补全请求；Node 是本地调试环境，你的脚本、mock 服务、构建工具都可能调模型；Nginx 是生产环境，它负责把浏览器发来的请求转发到 TaoToken，同时把 Key 藏在服务端，不让它出现在前端代码里。三者的关系是：VSCode 和 Node 直接用 Key，Nginx 用 Key 做代理，浏览器只跟 Nginx 说话。

如果你还没建 Key，直接去 API Keys 页面操作：

API Keys 管理：https://taotoken.net/api-keys?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content=api-keys

拿到 Key 之后，先别急着往代码里塞。下面按 VSCode、Node、Nginx 的顺序逐个配置。

3. 可复制配置：VSCode、Node、Nginx 三份骨架

3.1 VSCode settings.json 配置

VSCode 里很多 AI 插件支持自定义 API 端点。以常见的补全类插件为例，打开命令面板，输入Preferences: Open User Settings (JSON)，在settings.json里加入下面这段。不同插件字段名可能略有差异，核心是baseURL和apiKey两项。

{ "aiAssistant.baseURL": "https://taotoken.net/api", "aiAssistant.apiKey": "sk-你的TaoToken密钥", "aiAssistant.model": "claude-3-5-sonnet", "editor.inlineSuggest.enabled": true, "editor.quickSuggestions": { "other": true, "comments": false, "strings": true } }

这里baseURL填 TaoToken 的 API 根地址，插件会自动拼接/v1/chat/completions这类路径。model字段填你想用的模型名，TaoToken 支持多家模型，具体可用名称在文档里查。

文档地址：https://taotoken.net/doc?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content=doc

如果你用的是 Claude Code 这类命令行编码工具，配置方式不同，走的是 Anthropic 兼容入口：

ClaudeCode 接入：https://taotoken.net/ClaudeCodeAnthropic?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content=ClaudeCodeAnthropic

3.2 Node 环境变量文件

Node 侧不要硬编码 Key。在项目根目录建一个.env文件，配合dotenv使用。Vue CLI 项目本身支持.env系列文件，但注意：以VUE_APP_开头的变量会被打包进前端产物，所以模型 Key 绝对不能加这个前缀。

# .env.local —— 仅本地调试用，加入 .gitignore TAOTOKEN_API_BASE=https://taotoken.net/api TAOTOKEN_API_KEY=sk-你的TaoToken密钥 TAOTOKEN_MODEL=claude-3-5-sonnet # 前端可读的变量才加 VUE_APP_ 前缀，且只放非敏感信息 VUE_APP_API_PROXY=/api

然后在 Node 脚本里这样读取：

// scripts/ai-client.js require('dotenv').config({ path: '.env.local' }); const axios = require('axios'); const client = axios.create({ baseURL: process.env.TAOTOKEN_API_BASE, headers: { 'Authorization': `Bearer ${process.env.TAOTOKEN_API_KEY}`, 'Content-Type': 'application/json' }, timeout: 60000 }); async function chat(prompt) { const res = await client.post('/v1/chat/completions', { model: process.env.TAOTOKEN_MODEL, messages: [{ role: 'user', content: prompt }] }); return res.data.choices[0].message.content; } module.exports = { chat };

记得把.env.local写进.gitignore，别让 Key 跟着代码提交上去。

3.3 Nginx 反向代理配置

生产环境的关键是：浏览器请求打到 Nginx，Nginx 加上 Key 再转发给 TaoToken。这样前端代码里只有/api这样的相对路径，Key 始终留在服务器。

server { listen 80; server_name your-domain.com; root /var/www/vue-app/dist; index index.html; # Vue Router history 模式回退 location / { try_files $uri $uri/ /index.html; } # 反向代理到 TaoToken location /api/ { proxy_pass https://taotoken.net/api/; proxy_http_version 1.1; proxy_set_header Host taotoken.net; proxy_set_header Authorization "Bearer sk-你的TaoToken密钥"; proxy_set_header Content-Type "application/json"; proxy_set_header Connection ""; # 流式响应必须关闭缓冲 proxy_buffering off; proxy_cache off; proxy_read_timeout 300s; } }

几个要点。proxy_pass末尾的斜杠很关键，/api/转发到https://taotoken.net/api/，路径才能正确拼接。proxy_buffering off是为了支持流式输出，否则前端会等整个响应结束才收到数据。proxy_read_timeout调大，模型响应慢的时候不至于被 Nginx 掐断。

前端调用时就用相对路径：

// src/api/ai.js import axios from 'axios'; const ai = axios.create({ baseURL: '/api', timeout: 120000 }); export function ask(prompt) { return ai.post('/v1/chat/completions', { model: 'claude-3-5-sonnet', messages: [{ role: 'user', content: prompt }] }); }

4. 验证连通性：从本地请求到 Nginx 转发

配置写完，先别急着部署，本地验证一遍。第一步，用 curl 直接测 TaoToken 通道是否通：

curl -X POST https://taotoken.net/api/v1/chat/completions \ -H "Authorization: Bearer sk-你的TaoToken密钥" \ -H "Content-Type: application/json" \ -d '{ "model": "claude-3-5-sonnet", "messages": [{"role": "user", "content": "回复 ok 两个字"}] }'

返回里能看到choices数组和模型回复，说明 Key 和地址都没问题。如果返回 401，检查 Key 有没有复制完整；返回 404，检查路径是不是写成了/api/v1/...。

第二步，跑 Node 脚本验证环境变量读取：

node -e "require('dotenv').config({path:'.env.local'}); console.log(process.env.TAOTOKEN_API_BASE)"

能打印出https://taotoken.net/api就说明.env.local被正确加载。

第三步，本地起 Vue 开发服务器，在vue.config.js里配一个 devServer 代理，让本地/api也走 TaoToken：

// vue.config.js module.exports = { devServer: { proxy: { '/api': { target: 'https://taotoken.net', changeOrigin: true, pathRewrite: { '^/api': '/api' }, headers: { 'Authorization': 'Bearer sk-你的TaoToken密钥' } } } } };

这样本地开发时前端请求/api/v1/chat/completions，会被 devServer 转发到 TaoToken，行为和线上 Nginx 一致。你可以在浏览器里发一个请求，看 Network 面板是否返回正常。

第四步，部署到服务器后，用nginx -t检查配置语法，nginx -s reload重载，然后从外网访问你的域名，确认/api路径能正常返回。如果本地通、线上不通，八成是 Nginx 的proxy_set_header漏了Authorization，或者proxy_pass的斜杠写错了。

想快速验证模型对话是否正常，可以直接用网页版对话入口测：

模型对话：https://taotoken.net/?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content=model-chat

5. 本篇常见错排查

报错 401 Unauthorized：Key 不对或没带上。检查三处：VSCode 插件的apiKey字段、Node 的.env.local、Nginx 的proxy_set_header Authorization。注意 Bearer 后面有一个空格，别漏。

报错 404 Not Found：路径拼接错了。TaoToken 的根是https://taotoken.net/api，完整接口是/api/v1/chat/completions。Nginx 里proxy_pass如果写成https://taotoken.net（不带/api/），转发后路径会变成/v1/...，就 404 了。

前端打包后 Key 泄露：检查.env里有没有把 Key 写成VUE_APP_开头。只要带这个前缀，Vue CLI 就会把它注入到前端代码里，任何人打开浏览器都能看到。模型 Key 永远只放服务端。

流式响应卡住不动：Nginx 默认开启proxy_buffering，会把响应攒够一块才发。加上proxy_buffering off;和proxy_cache off;就能实时输出。

CORS 跨域报错：如果你没走 Nginx 代理，而是前端直接请求 TaoToken，浏览器会拦。正确做法就是本篇的代理方案，前端只请求同源的/api，跨域问题自然消失。

VSCode 插件不生效：有些插件不读settings.json里的自定义字段，而是要求你在插件自己的设置面板里填。先确认插件文档支持自定义baseURL，再检查字段名是否匹配。

Nginx 转发超时：模型响应可能超过默认的 60 秒。把proxy_read_timeout和proxy_send_timeout都调到 300s，前端 axios 的timeout也相应调大。

6. 长期编码与 Agent 场景的 Key 管理

如果你只是偶尔用一下，上面这套配置够用了。但如果你在 Vue 项目里长期做 AI 辅助编码，或者跑 Agent 类任务，频繁手动换 Key、改配置会很烦。TaoToken 的 Coding Plan 就是为这种场景准备的，一个订阅覆盖编码工具和 API 调用，省去逐个环境配 Key 的麻烦。

Coding Plan：https://taotoken.net/coding-plan?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content=coding-plan

回到工程本身，我的建议是把 Key 的管理收敛到一个地方。本地开发用.env.local，CI/CD 用环境变量注入，生产用 Nginx 的proxy_set_header。三处引用同一个 Key，但存储位置分开，互不污染。这样换 Key 的时候只改三个地方，而不是翻遍整个项目。

最后留一个实用技巧：在 Nginx 配置里把 Key 抽成变量，放在nginx.conf的http块或者单独的conf.d文件里，用include引入。这样主配置可以进版本库，含 Key 的文件单独管理，权限设成 600，只有 root 能读。部署脚本里用envsubst从环境变量生成这个文件，Key 就不会出现在任何提交记录里。