前端调用大模型：从零搭建Vite全栈项目并接入DeepSeek API
随着大语言模型（LLM）的普及，越来越多的开发者开始尝试在前端直接调用大模型API。本文将带你一步步实现一个完整的前端项目，通过HTTP请求方式调用DeepSeek大模型，并结合现代工程化工具Vite进行开发。我们将涵盖项目初始化、环境配置、API调用以及最佳实践等内容。
一、为什么要在前端调用大模型？
传统上，大模型的调用通常通过后端服务代理完成，以避免暴露API密钥。然而，在某些场景下，如轻量级应用、快速原型验证或用户隐私保护需求中，直接在前端调用大模型API成为一种可行方案。
虽然存在安全风险（如API密钥泄露），但通过合理的工程化手段和环境变量管理，仍可在可控范围内实现功能。
二、项目结构与初始化
我们使用 Vite 搭建一个现代化的前端工程化项目。Vite 是由尤雨溪团队推出的下一代构建工具，具有极快的冷启动速度和热更新能力，非常适合现代Web开发。
1. 创建项目
npm create vite@latest frontend_llm -- --template vanilla
// vite@latest 是 Vite 官方提供的项目脚手架工具
// @latest 表示使用 最新版本
// --template vanilla 表示使用 vanilla 模板 即原生JSS/CSS/JavaScript
cd frontend_llm
npm install
这会生成一个基础的原生HTML/CSS/JS项目结构：
frontend_llm/
├── index.html
├── main.js
├── styles.css
├── vite.config.ts
├── package.json
└── node_modules/
2. 配置 Vite 支持环境变量
Vite 支持 .env 文件来管理环境变量。我们需要创建 .env.local 文件，用于存放敏感信息（如API密钥）。
echo "VITE_DEEPSEEK_API_KEY=your_api_key_here" > .env.local
⚠️ 注意：
VITE_前缀是必须的，否则Vite不会将该变量注入到前端代码中。
三、实现前端调用 DeepSeek API
我们以 DeepSeek 的聊天接口为例，演示如何通过 fetch 发送复杂HTTP请求。
1. HTML 页面结构
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>通用前端模板</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<h1>Hello DeepSeek</h1>
<div id="reply"></div>
<script type="module" src="./main.js"></script>
</body>
</html>
2. JavaScript 调用逻辑（main.js）
// llm api 地址
const endpoint = 'https://api.deepseek.com/chat/completions';
// 请求头配置
const headers = {
'Content-Type': 'application/json',
'Authorization': `Bearer ${import.meta.env.VITE_DEEPSEEK_API_KEY}`
};
// 请求体数据
const payload = {
model: 'deepseek-chat',
messages: [
{ role: "system", content: "You are a helpful assistant." },
{ role: "user", content: "你好 DeepSeek" }
]
};
// 发起 fetch 请求
async function callLLM() {
try {
const response = await fetch(endpoint, {
method: 'POST',
headers,
body: JSON.stringify(payload)
});
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
console.log('响应数据:', data);
// 显示回复内容
document.getElementById('reply').textContent =
data.choices[0].message.content;
} catch (error) {
console.error('请求失败:', error);
document.getElementById('reply').textContent = '请求出错，请检查网络或API密钥';
}
}
// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', callLLM);
四、关键知识点解析
1. HTTP 请求详解
请求行
POST /chat/completions HTTP/1.1
- 方法：
POST（用于发送JSON数据） - URL：
https://api.deepseek.com/chat/completions - 协议版本：
HTTP/1.1
请求头
{
"Content-Type": "application/json",
"Authorization": "Bearer your-api-key"
}
Content-Type: 告诉服务器请求体是JSON格式Authorization: 使用 Bearer Token 方式认证，这是OAuth 2.0的标准做法
请求体
必须使用 JSON.stringify() 序列化对象，因为 fetch 不支持直接发送JavaScript对象。
body: JSON.stringify(payload)
2. 异步处理：Promise vs async/await
fetch() 返回的是一个 Promise 实例，因此可以使用 .then() 或 async/await 处理异步流程。
// 使用 then
fetch(url).then(res => res.json()).then(data => console.log(data));
// 使用 async/await（推荐）
async function getData() {
const res = await fetch(url);
const data = await res.json();
return data;
}
async/await 更加直观，可读性更强，适合复杂的异步逻辑。
五、工程化实践建议
1. 环境变量管理
- 所有敏感信息（如API密钥）应放在
.env.local中 - 不要提交
.env.local到Git仓库 - 使用
.gitignore忽略它
.env.local
.env
2. 使用 Vite 全栈脚手架（可选扩展）
如果你希望进一步提升开发体验，可以考虑使用基于 Vite 的全栈框架，如：
- Vite + Node.js：构建前后端一体的微服务
- Vite + Express：提供API代理层，隐藏真实API密钥
- Vite + Supabase / Firebase：集成身份验证和数据库
例如，你可以添加一个简单的Express服务器作为代理：
// server.js
const express = require('express');
const app = express();
app.get('/api/chat', async (req, res) => {
const apiKey = process.env.DEEPSEEK_API_KEY;
const response = await fetch('https://api.deepseek.com/chat/completions', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${apiKey}`
},
body: JSON.stringify(req.body)
});
res.json(await response.json());
});
app.listen(3000);
这样就能在前端调用 /api/chat 而不暴露真实API地址。
六、安全性提醒
尽管本教程展示了前端直接调用API的方法，但需注意以下几点：
-
API密钥不应硬编码在前端代码中
- 若必须暴露，仅限于测试环境
- 生产环境建议使用后端代理
-
避免跨域问题
- 确保目标API支持CORS
- 可通过Nginx或Express设置允许来源
-
监控与限流
- 大模型API通常有调用频率限制
- 添加错误重试机制和超时控制
七、总结
本文完整介绍了如何使用 Vite 搭建前端项目，并通过 fetch 调用 DeepSeek 大模型API。我们覆盖了：
- 项目初始化与Vite配置
- 环境变量管理（
.env.local） - HTTP请求结构详解（请求行、请求头、请求体）
- 异步处理的最佳实践（
async/await） - 安全性与工程化建议
虽然前端直接调用大模型存在安全隐患，但在合理设计下，依然是一种高效、灵活的开发方式。未来，随着WebAssembly和边缘计算的发展，前端AI应用将迎来更多可能性。
📌 动手实践：尝试修改
main.js中的用户消息，观察不同输入下的模型响应效果；或者添加按钮触发手动请求，增强交互体验。
关键词：前端调用大模型、Vite、DeepSeek、fetch、环境变量、HTTP请求、工程化、LLM、API调用
