文
章
目
录
章
目
录
最近在研究网页开发的时候，发现把Deepseek接入网页还挺有意思的，今天就来给大伙分享一下具体的操作流程。我以Vuepress文档接入Deepseek实现文章总结功能为例，一步一步带着大家完成接入。
一、注册Deepseek并获取API密钥
这个大家应该都会，不会的可以参考文章：如何获取 DeepSeek API？
二、借助Serverless函数代理API请求
要是你的网页是静态网站，没有后端服务器，这种情况下可以借助Vercel这个免费平台来部署一个“无服务器函数”，这么做的主要目的是把API Key隐藏起来，保障安全。具体步骤如下：
- 注册Vercel：访问Vercel官网，用GitHub账号登录就行。要是还没有GitHub账号，得先去注册一个。
- 新建项目：登录Vercel后，选择“Create a New Project”。然后把你的VuePress博客仓库导入进来，接着修改部署配置，添加一个环境变量
DEEPSEEK_API_KEY，把之前获取到的Deepseek的API Key填进去。
- 创建Serverless函数：在项目根目录新建一个
api/summarize.js文件，Vercel会自动识别并把它部署为Serverless函数。下面来详细看看这个文件里的代码：
// 导出默认的异步函数，处理请求和响应
export default async (req, res) => {
// --------------- CORS 配置 ---------------
// 允许访问的源列表，这里添加了本地开发地址和博客线上地址
const allowedOrigins = ["http://localhost:8080", "https://mmmying.github.io"];
// 获取请求头中的origin字段，它表示请求的来源
const origin = req.headers.origin;
// 判断请求来源是否在允许列表中
const isOriginAllowed = allowedOrigins.includes(origin);
// 设置CORS头的辅助函数，减少重复代码
const setCorsHeaders = () => {
// 根据请求来源是否允许，设置Access-Control-Allow-Origin头
res.setHeader("Access-Control-Allow-Origin", isOriginAllowed ? origin : "");
// 设置允许的请求方法
res.setHeader("Access-Control-Allow-Methods", "POST, OPTIONS");
// 设置允许的请求头
res.setHeader("Access-Control-Allow-Headers", "Content-Type");
};
// --------------- 处理OPTIONS预检请求 ---------------
// 如果是OPTIONS请求，直接设置CORS头并返回200状态码
if (req.method === "OPTIONS") {
setCorsHeaders();
return res.status(200).end();
}
// --------------- 处理POST请求 ---------------
// 如果是POST请求
if (req.method === "POST") {
try {
// 验证来源，如果来源不允许，设置CORS头并返回403状态码
if (!isOriginAllowed) {
setCorsHeaders();
return res.status(403).json({ error: "非法来源" });
}
// 解析请求体，获取content字段
const { content } = req.body;
// 检查content是否存在且长度是否超过限制
if (!content || content.length > 30000) {
setCorsHeaders();
return res.status(400).json({ error: "无效内容" });
}
// 调用DeepSeek API
const apiResponse = await fetch("https://api.deepseek.com/v1/chat/completions", {
method: "POST",
headers: {
// 设置Authorization头，包含API Key
Authorization: `Bearer ${process.env.DEEPSEEK_API_KEY}`,
// 设置请求体类型
"Content-Type": "application/json"
},
body: JSON.stringify({
model: "deepseek-chat",
messages: [
{
role: "user",
// 让Deepseek用中文总结内容，限制长度为3000
content: `用中文总结以下技术内容：\n\n${content.slice(0, 3000)}`
}
]
})
});
// 打印API响应，方便调试
console.log("deepseek apiResponse: ", apiResponse)
// 如果API响应不成功，抛出错误
if (!apiResponse.ok) throw new Error("API调用失败");
// 解析API响应，获取摘要内容
const { choices } = await apiResponse.json();
const summary = choices[0].message.content.replace(/\n/g, "<br>");
// 成功响应，设置CORS头并返回摘要
setCorsHeaders();
return res.status(200).json({ summary });
} catch (error) {
// 错误响应，打印错误信息，设置CORS头并返回错误提示
console.error("Error:", error);
setCorsHeaders();
return res.status(500).json({ error: "摘要生成失败" });
}
}
// --------------- 其他请求方法处理 ---------------
// 对于其他请求方法，设置CORS头并返回405状态码
setCorsHeaders();
return res.status(405).json({ error: "不允许的请求方法" });
};
代码写好后，把代码提交到远程仓库，Vercel就会自动识别并部署这个Serverless函数。
三、前端集成
接下来就是在前端集成相关功能，让网页能展示Deepseek生成的文章摘要。
- 安装依赖：在VuePress项目里，需要安装
@vuepress/plugin-register-components插件，在命令行里执行：
pnpm add @vuepress/plugin-register-components
- 配置插件：在
.vuepress/config.js文件里配置这个插件，指定组件目录。具体代码如下：
// 引入path工具
import { path } from "@vuepress/utils";
module.exports = {
plugins: [
[
'@vuepress/plugin-register-components',
{
// 让插件自动注册components目录下的所有Vue组件
componentsDir: path.resolve(__dirname, './components')
}
]
]
};
- 创建组件：在
docs/.vuepress/components/目录下创建Post.vue组件，在这个组件里异步调用后端接口来获取文章摘要。代码如下：
<template>
<div class="article">
<!-- 添加摘要容器，如果有摘要则显示，否则显示加载提示 -->
<div v-if="summary" class="summary">
<h3>AI摘要</h3>
<!-- 渲染摘要内容，将换行符替换为<br>标签 -->
<div v-html="summary"></div>
</div>
<div v-else class="loading">生成摘要中...</div>
<!-- 文章内容，这里注释掉了，实际使用时可根据需求添加 -->
<!-- <Content /> -->
</div>
</template>
<script setup>
// 引入Vue的响应式和生命周期函数
import { ref, onMounted } from 'vue';
// 定义一个响应式变量，用于存储文章摘要
const summary = ref(null);
// 生成摘要的方法
async function generateSummary() {
try {
// 获取文章纯文本内容，这里根据实际结构调整了选择器
const content = document.querySelector('.vp-page').innerText;
// 向后端接口发送POST请求，传递文章内容
const response = await fetch('https://how-browsers-work.vercel.app/api/summarize', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ content })
});
// 解析响应数据
const data = await response.json();
// 打印响应数据，方便调试
console.log('response data', data);
// 处理摘要内容，将换行符替换为<br>标签
summary.value = data.summary.replace(/\n/g, '<br>');
} catch (error) {
// 如果出现错误，打印错误信息
console.error('摘要生成失败:', error);
}
}
// 组件挂载后，调用生成摘要的方法
onMounted(() => {
generateSummary();
})
</script>
<style>
// 摘要容器的样式
.summary { background: #f8f9fa; padding: 1rem; border-radius: 8px; }
// 加载提示的样式
.loading { color: #666; font-style: italic; }
</style>
- 使用组件：在页面中使用这个组件，要把组件放在Frontmatter之后，像这样：
---
lang: zh-CN
title: 01 | Chrome架构：仅仅打开了1个页面，为什么有4个进程？
---
<Post></Post>
四、访问页面及遇到的问题
当你访问页面时，可能会发现显示摘要的地方提示摘要生成，到这一步其实就相当于成功接入Deepseek啦。
希望这篇文章能帮助大家顺利把Deepseek接入到自己的网页里！
