当前位置：首页 > news >正文

VUE对接deepseekAPI调用

news 2025/7/9 6:53:11

1.先去开放平台注册账号申请api key。开放平台：https://platform.deepseek.com/api_keys

2.你的项目需要有发送请求的axios或者自己写。

npm install axios
# 或
yarn add axios

3.创建 API 调用函数

在 Vue 项目中，通常会将 API 调用的逻辑封装到一个单独的文件中，例如 src/api/deepseek.js。

关于其中 /your-endpoint-path 是需要你自己去api文档中查看的，文档具体地方在最后面。

import axios from 'axios';const DEEPSEEK_API_URL = 'https://api.deepseek.com'; // 实际的 DeepSeek API 地址
const DEEPSEEK_API_KEY = 'your-api-key'; // 替换为你的 DeepSeek API Key// 创建 axios 实例
const deepseekClient = axios.create({baseURL: DEEPSEEK_API_URL,headers: {'Authorization': `Bearer ${DEEPSEEK_API_KEY}`,'Content-Type': 'application/json',},
});/*** 调用 DeepSeek API 示例* @param {Object} data 请求参数* @returns {Promise} API 响应*/
export const callDeepSeekAPI = async (data) => {try {const response = await deepseekClient.post('/your-endpoint-path', data); // 替换为实际的 API 路径return response.data;} catch (error) {console.error('DeepSeek API 调用失败:', error);throw error;}
};

在你的 Vue 组件中，可以调用上面封装的 callDeepSeekAPI 函数。

<template><div><h1>DeepSeek API 调用示例</h1><button @click="fetchData">调用 DeepSeek API</button><div v-if="loading">加载中...</div><div v-else><pre>{{ responseData }}</pre></div></div>
</template><script>
import { callDeepSeekAPI } from '@/api/deepseek'; // 导入封装的 API 函数export default {data() {return {loading: false,responseData: null,};},methods: {async fetchData() {this.loading = true;try {const data = {// 替换为实际的请求参数prompt: '你好，DeepSeek！',max_tokens: 50,};this.responseData = await callDeepSeekAPI(data);} catch (error) {console.error('API 调用失败:', error);} finally {this.loading = false;}},},
};
</script><style scoped>
pre {background: #f4f4f4;padding: 10px;border-radius: 5px;
}
</style>

文档：对话补全 | DeepSeek API Docs