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

流式输出和常见报错处理

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

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

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

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

验证配置是否真正可用

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

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