大模型Vue组件配置：从零搭建对话界面并避坑

想在 Vue 项目里接入大模型对话能力，核心是把“请求大模型 API”封装成一个可复用的组件：环境变量存密钥、独立模块发请求、组件负责渲染和交互。
下面按零基础也能照做的顺序，从创建项目到验证结果完整走一遍。

先确认运行环境和密钥来源

开始前需要准备三样东西：Node.js 18 以上版本、一个能正常运行的 Vue 3 项目、以及大模型平台提供的 API Key 和接口地址。
用 node -v 检查版本，低于 18 建议先升级，否则部分构建工具会报错。

如果还没有项目，用 Vite 创建一个：

npm create vite@latest my-ai-app -- --template vue
cd my-ai-app
npm install
npm run dev

浏览器打开终端提示的本地地址（通常是 http://localhost:5173），能看到 Vue 欢迎页就说明环境没问题。
API Key 请到你所使用的大模型平台控制台创建，不要写死在代码里，后面会用环境变量管理。

配置环境变量和请求封装

在项目根目录新建 .env.local 文件，写入密钥和接口地址：

VITE_AI_API_KEY=你的密钥
VITE_AI_BASE_URL=https://你的接口地址/v1/chat/completions

Vite 只会把 VITE_ 开头的变量注入前端，所以命名必须带这个前缀。
同时把 .env.local 加入 .gitignore，避免密钥被提交到仓库。

接着新建 src/api/chat.js，封装请求逻辑：

export async function sendMessage(messages) {
  const res = await fetch(import.meta.env.VITE_AI_BASE_URL, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      Authorization: `Bearer ${import.meta.env.VITE_AI_API_KEY}`
    },
    body: JSON.stringify({
      model: '你的模型名称',
      messages,
      stream: false
    })
  })
  if (!res.ok) {
    throw new Error(`请求失败：${res.status}`)
  }
  const data = await res.json()
  return data.choices[0].message.content
}

注意 model 字段要填平台实际支持的模型名，不同平台取值不同，填错通常会返回 400 或 404。

编写对话组件并接入页面

新建 src/components/ChatBox.vue，实现输入框、消息列表和发送逻辑：

然后在 src/App.vue 中引入 ，页面刷新后就能看到一个最简对话界面。
发送后如果消息列表出现用户提问和模型回复，说明配置成功。

流式输出和常见报错处理

想要打字机效果，把请求体里的 stream 改成 true，并用 res.body.getReader() 逐块读取。
注意流式返回的是多段 data: 开头的文本，需要按行切分、跳过 [DONE] 结束标记，再拼接到当前回复上，否则页面会出现乱码或半截内容。

实际配置中最容易踩的坑集中在这几类：

• 浏览器控制台报 CORS 跨域：说明接口不允许前端直连，需要把请求转发到自己的后端或使用平台支持的前端调用方式。
• 返回 401：密钥无效或没带上 Authorization 头，检查环境变量是否以 VITE_ 开头、重启开发服务器后是否生效。
• 返回 429：触发平台限流，降低请求频率或检查账户额度。
• 页面一直 loading：请求没有返回，先看网络面板里请求状态码，再确认接口地址是否完整到 /chat/completions。

改完 .env.local 后必须重启 npm run dev，环境变量不会热更新，这是新手最常忽略的一点。

验证配置是否真正可用

判断标准很简单：输入一句“你好”，能在几秒内看到模型回复且控制台无红色报错，就说明组件配置可用。
再连续发送两条消息，确认历史上下文被正确带入；
然后把密钥临时改错一位，刷新页面应看到 401 提示而不是白屏，这能验证错误处理分支也生效。

需要提醒的是，前端直接放密钥只适合本地调试和内部演示，正式上线应把请求放到服务端转发，避免密钥暴露。
不同平台的接口路径和参数名可能有差异，以你所用平台控制台的实际文档为准。