<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 'axios'
const call
DeepSeekAPI = async (userMessage) => {
try {
const response = aw
ait axios.post(
'https://
api.
deepseek.com/v1/chat/completions',
{
model: "
deepseek-chat", // 根据实际
模型调整
messages: [
{ role: "system", content: "你是有帮助的
AI助手" },
{ role: "user", content: userMessage }
],
temperature: 0.7
},
{
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${import.meta.env.VITE_
DEEPSEEK_
API_KEY}`
}
}
)
return response.data.choices[0].message.content
} catch (error) {
console.error('
API调用失败:', error)
return "抱歉，暂时无法处理您的请求"
}
}
```
#### 2. 修改发送消息逻辑
```javascript
const sendMessage = async () => {
// ...原有用户消息处理代码保持不变...
try {
isLoading.value = true
// 替换原有的mock调用
const
aiResponse = aw
ait call
DeepSeekAPI(content)
messages.push({
role: '
ai',
content:
aiResponse,
timestamp: Date.now()
})
} catch (error) {
console.error('请求异常:', error)
// 可以添加错误消息提示
messages.push({
role: '
ai',
content: '请求处理失败，请稍后再试',
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: {
'import.meta.env': JSON.stringify(process.env)
}
})
```
---
### 四、安全增强建议
1. **不要在前端直接暴露
API密钥**（当前方案仅适用于
开发环境）
- 推荐通过后端服务中转
API请求
- 使用服务器端实现：
```javascript
// 伪代码示例（Node.js端）
app.post('/
api/chat', async (req, res) => {
const response = aw
ait axios.post('https://
api.
deepseek.com/v1/chat/completions', {
// ...请求体...
}, {
headers: {
Authorization: `Bearer ${process.env.
DEEPSEEK_
API_KEY}`
}
})
res.json(response.data)
})
```
---
### 五、流式响应实现（可选）
如果需要实现打字机效果：
```javascript
const callStreaming
API = async (content) => {
try {
const response = aw
ait fetch('https://
api.
deepseek.com/v1/chat/completions', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `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 = ''
while (true) {
const { done, value } = aw
ait reader.read()
if (done) break
const chunk = decoder.decode(value)
const lines = chunk.split('\n')
lines.forEach(line => {
const message = line.replace(/^data: /, '')
if (message === '[DONE]') 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('解析错误:', e)
}
})
}
} catch (error) {
console.error('流式请求错误:', 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. 用户体验优化
- 添加消息发送动画
- 实现消息编辑功能
- 添加消息加载状态指示器
扫一扫
1963
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
