<think>好的，用户之前让我帮忙生成一个
Vue3的
AI聊天页面代码，现在他问的是如何
对接深度求索（
DeepSeek）的API。我需要先回顾之前的
对话，确保这次回答能衔接上。
首先，用户已经有了一个基于
Vue3的聊天页面，现在需要将模拟的
AI回复换成真实的
DeepSeek API。之前提供的代码里用了mock
AIResponse函数，所以现在需要指导用户如何替换这个部分。
接下来，我得确认
DeepSeek的API文档内容。通常，这类API需要API密钥，使用POST请求，发送JSON数据，比如模型名称、消息数组等。可能需要构造正确的请求头，包括Authorization和Content
-Type。
然后，用户可能需要安装axios或者使用fetch来发送请求。之前的示例里用了mock，所以需要建议用户安装axios并替换掉模拟函数。
另外，错误处理很重要。之前的代码没有处理API调用可能出现的错误，所以需要补充try
-catch块，捕获错误并给出提示，比如网络问题或权限问题。
还需要考虑异步处理和加载状态。在发送请求时，isLoading.value应该设置为true，请求完成后设为false，无论成功与否，所以要在finally块里处理。
另外，
DeepSeek的API可能返回
流式响应，但用户当前代码是等待完整响应。如果需要
流式处理，可能需要调整代码，使用SSE或WebSocket，但考虑到用户当前是基础
对接，可能先处理非
流式的情况，后续再建议扩展。
安全方面，要提醒用户不要在前端暴露API密钥，建议通过后端服务中转，但可能用户只是测试，所以暂时先提供前端直接调用的方法，同时给出警告。
最后，样式和消息格式可能需要调整，比如消息内容可能是Markdown格式，可以建议用户添加相应的渲染支持，比如使用marked库。
总结步骤：替换mock函数为真实API调用，处理请求和响应，错误处理，安全提示，扩展建议。</think>以下是如何
对接深度求索（
DeepSeek）API的详细指南，基于
Vue3项目的实现（接续之前提供的聊天页面代码）：
--
### 一、前期准备
1. 注册
DeepSeek账号并获取API Key
- 访问[
DeepSeek官网](https
://www.
deepseek.com/)
- 创建账号后，在控制台获取API密钥（通常以`sk
-`开头）
2. 安装必要依赖
```bash
npm install axios # 推荐使用axios进行HTTP请求
```
--
### 二、核心代码修改
#### 1. 替换mock
AIResponse函数
```javascript
// 在<script setup>中替换原有mock函数
import axios from &#
39;axios&#
39;
const call
DeepSeekAPI = async (userMessage) => {
try {
const response = aw
ait axios.post(
&#
39;https
://api.
deepseek.com/v1/chat/completions&#
39;,
{
model
: "
deepseek-chat", // 根据实际模型调整
messages
: [
{ role
: "system", content
: "你是有帮助的
AI助手" },
{ role
: "user", content
: userMessage }
],
temperature
: 0.7
},
{
headers
: {
&#
39;Content
-Type&#
39;
: &#
39;application/json&#
39;,
&#
39;Authorization&#
39;
: `Bearer ${import.meta.env.VITE_
DEEPSEEK_API_KEY}`
}
}
)
return response.data.choices[0].message.content
} catch (error) {
console.error(&#
39;API调用失败
:&#
39;, error)
return "抱歉，暂时无法处理您的请求"
}
}
```
#### 2. 修改发送消息逻辑
```javascript
const sendMessage = async () => {
// ...原有用户消息处理代码保持不变...
try {
isLoading.value = true
// 替换原有的mock调用
const
aiResponse = aw
ait call
DeepSeekAPI(content)
messages.push({
role
: &#
39;
ai&#
39;,
content
: aiResponse,
timestamp
: Date.now()
})
} catch (error) {
console.error(&#
39;请求异常
:&#
39;, error)
// 可以添加错误消息提示
messages.push({
role
: &#
39;
ai&#
39;,
content
: &#
39;请求处理失败，请稍后再试&#
39;,
timestamp
: Date.now()
})
} finally {
isLoading.value = false
scrollToBottom()
}
}
```
---
### 三、环境变量配置
1. 创建`.env`文件
```env
VITE_
DEEPSEEK_API_KEY=your_api_key_here
```
2. 在vite.config.js中添加配置
```javascript
export default defineConfig({
// ...其他配置...
server
: {
port
: 3000
},
define
: {
&#
39;import.meta.env&#
39;
: JSON.stringify(process.env)
}
})
```
---
### 四、安全增强建议
1. **不要在前端直接暴露API密钥**（当前方案仅适用于开发环境）
- 推荐通过后端服务中转API请求
- 使用服务器端实现：
```javascript
// 伪代码示例（Node.js端）
app.post(&#
39;/api/chat&#
39;, async (req, res) => {
const response = aw
ait axios.post(&#
39;https
://api.
deepseek.com/v1/chat/completions&#
39;, {
// ...请求体...
}, {
headers
: {
Authorization
: `Bearer ${process.env.
DEEPSEEK_API_KEY}`
}
})
res.json(response.data)
})
```
---
### 五、
流式响应实现（可选）
如果需要实现打字机效果：
```javascript
const callStreamingAPI = async (content) => {
try {
const response = aw
ait fetch(&#
39;https
://api.
deepseek.com/v1/chat/completions&#
39;, {
method
: &#
39;POST&#
39;,
headers
: {
&#
39;Content
-Type&#
39;
: &#
39;application/json&#
39;,
&#
39;Authorization&#
39;
: `Bearer ${import.meta.env.VITE_
DEEPSEEK_API_KEY}`
},
body
: JSON.stringify({
model
: "
deepseek-chat",
messages
: [{ role
: "user", content }],
stream
: true
})
})
const reader = response.body.getReader()
const decoder = new TextDecoder()
let fullResponse = &#
39;&#
39;
while (true) {
const { done, value } = aw
ait reader.read()
if (done) break
const chunk = decoder.decode(value)
const lines = chunk.split(&#
39;\n&#
39;)
lines.forEach(line => {
const message = line.replace(/^data
: /, &#
39;&#
39;)
if (message === &#
39;[DONE]&#
39;) return
try {
const parsed = JSON.parse(message)
if (parsed.choices[0].delta.content) {
fullResponse
+= parsed.choices[0].delta.content
// 实时更新最后一条消息
messages[messages.length
- 1].content = fullResponse
}
} catch (e) {
console.log(&#
39;解析错误
:&#
39;, e)
}
})
}
} catch (error) {
console.error(&#
39;
流式请求错误
:&#
39;, error)
}
}
```
--
### 六、完整功能扩展建议
1. 添加以下功能提升体验：
```javascript
// 在状态管理中增加
const errorMessage = ref(null)
// 在API调用异常时显示错误提示
const showError = (message) => {
errorMessage.value = message
setTimeout(() => errorMessage.value = null, 5000)
}
// 在
模板中添加错误提示组件
<div v
-if="errorMessage" class="error
-message">
{{ errorMessage }}
</div>
// 样式补充
.error
-message {
position
: fixed;
top
: 20px;
right
: 20px;
padding
: 15px;
background
: #ff4444;
color
: white;
border
-radius
: 8px;
}
```
---
### 七、注意事项
1. API调用成本管理
- 建议在服务端添加使用量监控
- 设置最大
对话次数限制
2. 内容安全
- 建议在后端添加内容过滤
- 遵守
DeepSeek的使用政策
3. 性能优化
- 添加消息缓存（localStorage）
- 实现请求取消功能
- 添加请求重试机制
4. 用户体验优化
- 添加消息发送动画
- 实现消息编辑功能
- 添加消息加载状态指示器
扫一扫
270
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
