【AI-12 全栈-5/Lesson36(2025-11-19）前端调用大模型（LLM）：从零搭建 Vite 全栈工程并集成 DeepSeek API🚀

Jing_Rainbow
62 阅读4分钟

🚀在现代 Web 开发中，前端不再只是静态页面的展示层，而是可以主动与人工智能大模型（Large Language Model, LLM）交互、获取智能响应的动态系统。本文将手把手带你构建一个基于 Vite 的原生 HTML/CSS/JS 项目，并通过 HTTP 请求 调用 DeepSeek 大模型 API，实现前端直接与 LLM 对话的能力。

🔧 项目初始化：使用 Vite 搭建全栈脚手架

Vite 是由 Vue.js 作者尤雨溪开发的新一代前端构建工具，以极速冷启动和热更新著称。虽然常用于 Vue/React 项目，但它也完美支持 纯原生 HTML + JavaScript 的开发模式，非常适合轻量级全栈原型。

初始化项目结构

我们创建了一个名为 demo 的项目，其核心配置文件如下：

// package.json
{
  "name": "demo",
  "version": "0.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "vite": "^5.0.0"
  }
}
  • "type": "module" 表示使用 ES 模块语法（支持 import/export）。
  • vite 作为开发服务器和构建工具。
  • 无任何框架依赖，纯原生开发。

运行 npm run dev 即可启动本地开发服务器（默认 http://localhost:5173）。

🌐 前端调用 LLM：HTTP 请求详解

要让前端与 LLM 通信，最通用的方式是通过 HTTP POST 请求 向大模型的 API 端点发送消息。这里我们使用 DeepSeek 提供的聊天接口。

🔗 API 端点与请求格式

根据 DeepSeek 官方文档，其聊天完成接口为：

POST https://api.deepseek.com/chat/completions

这是一个标准的 RESTful API，遵循 OpenAI 兼容格式。

请求行（Request Line）

POST /chat/completions HTTP/1.1
Host: api.deepseek.com

请求头（Headers）

必须包含：

  • Content-Type: application/json
  • Authorization: Bearer ${API_KEY}

⚠️ 注意：Bearer 是固定前缀，后面紧跟你的 API 密钥。

请求体（Body）

需为 JSON 字符串，结构如下：

{
  "model": "deepseek-chat",
  "messages": [
    { "role": "system", "content": "You are a helpful assistant." },
    { "role": "user", "content": "你好 DeepSeek" }
  ]
}
  • model 指定使用哪个模型（如 deepseek-chat）。
  • messages 是对话历史数组，每个消息包含 role（system/user/assistant）和 content。

❗ 重要：fetch() 的 body 参数不能直接传入 JS 对象，必须使用 JSON.stringify() 转为字符串。

🔐 安全管理 API Key：使用 .env 环境变量

将敏感信息（如 API Key）硬编码在代码中是严重安全风险。Vite 支持通过 .env 文件管理环境变量。

配置步骤

  1. 在项目根目录创建 .env 文件（不要提交到 Git！）：

    VITE_DEEPSEEK_API_KEY=your_actual_api_key_here

  2. 在 JS 中通过 import.meta.env 访问：

    const apiKey = import.meta.env.VITE_DEEPSEEK_API_KEY;

✅ Vite 规定：只有以 VITE_ 开头的环境变量才会暴露给客户端代码，这是安全设计。

💻 核心逻辑实现：main.js

以下是完整的前端调用代码：

// main.js
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" }
  ]
};

// 使用 await 使异步代码同步化（需在 async 函数内，但 Vite 支持顶层 await）
const response = await fetch(endpoint, {
  method: 'POST',
  headers,
  body: JSON.stringify(payload)
});

const data = await response.json();
console.log(data);
document.getElementById('reply').textContent = data.choices[0].message.content;

🔄 fetch 返回 Promise，传统写法用 .then()，但现代开发更推荐 async/await，代码更清晰。

🖼️ 页面结构与样式：index.html 与 styles.css

HTML 结构

当前 index.html 内容极简：

<!-- index.html -->
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
  <title>前端调用 LLM</title>
</head>
<body>
  <div class="container">
    <main class="site-main">
      <div class="card">
        <h2>🤖 与 DeepSeek 对话</h2>
        <p id="reply">正在加载...</p>
        <button class="btn primary" onclick="location.reload()">重新请求</button>
      </div>
    </main>
  </div>
  <script type="module" src="/main.js"></script>
</body>
</html>

🔧 补充建议：实际项目应添加 <div id="reply"> 用于显示 AI 回复，并加入按钮触发新请求。

CSS 样式系统

styles.css 实现了现代化的响应式卡片 UI，并支持 亮色/暗色主题切换：

:root {
  --bg: #ffffff;
  --text: #222222;
  /* ... */
}

.theme-dark {
  --bg: #0b0f14;
  --text: #f2f5f8;
  /* ... */
}
  • 使用 CSS 自定义属性（CSS Variables）实现主题。
  • 响应式布局（max-width, padding, gap）。
  • 按钮悬停动效（transform: translateY(-1px)）。

📦 依赖管理：package-lock.json 解析

package-lock.json 锁定了项目所有依赖的确切版本，确保团队协作时环境一致。

关键依赖：

  • vite@5.4.21：核心构建工具。
  • esbuild@0.21.5：Vite 底层使用的超快打包器。
  • rollup@4.53.3：用于生产构建。
  • 各平台原生二进制包（如 @esbuild/win32-x64、@rollup/rollup-darwin-arm64）确保跨平台兼容。

🛠️ 这些 optionalDependencies 使得 Vite 能在 Windows、macOS、Linux 等系统上高效运行。

🧪 开发与部署流程

  1. 安装依赖

    npm install

  2. 启动开发服务器

    npm run dev

  3. 构建生产版本

    npm run build

    输出到 dist/ 目录。

  4. 本地预览构建结果

    npm run preview

⚠️ 注意事项与最佳实践

  1. CORS 限制
    浏览器出于安全会阻止跨域请求。但 DeepSeek API 若未正确配置 CORS，前端直连可能失败。解决方案：

    • 使用代理（Vite 支持 server.proxy 配置）。
    • 或改用后端中转（更安全）。

  2. 错误处理
    当前代码无错误捕获。应添加：

    if (!response.ok) {
  throw new Error(`HTTP error! status: ${response.status}`);
}

  3. 用户输入
    实际应用应允许用户输入问题，而非固定字符串。

  4. 流式响应
    高级用法可使用 ReadableStream 实现逐字输出（需 API 支持 SSE）。

🌈 总结

通过本文，你已掌握：

  • ✅ 使用 Vite 初始化原生前端项目
  • ✅ 通过 fetch 发送 POST 请求调用 LLM API
  • ✅ 安全管理 API Key（.env + VITE_ 前缀）
  • ✅ 构建响应式、主题化的 UI
  • ✅ 理解依赖锁定与跨平台兼容机制

这不仅是一个“调用 AI”的 Demo，更是现代前端工程化开发的完整缩影——简洁、安全、高效、可扩展。未来，你可以在此基础上添加聊天界面、历史记录、多轮对话等高级功能，打造真正的 AI 应用前端！

🚀 技术在进化，而你，已经站在了浪潮之巅。

avatar
文章
阅读
粉丝