前言
在AI技术蓬勃发展的今天，将大语言模型(LLM)集成到前端应用已成为开发者的必备技能。本文将以一个调用DeepSeek API的实战项目为例，深入探讨如何使用Vite构建现代化的前端开发环境，以及如何安全地管理敏感信息。
一、项目架构概览
我们的项目是一个极简的AI对话界面，核心功能是通过HTTP请求与DeepSeek大模型进行交互。项目采用原生HTML/CSS/JS技术栈，借助Vite作为构建工具，实现了现代化的开发体验。
技术栈选择
- Vite：下一代前端构建工具，提供极速的开发服务器和优化的生产构建
- 原生ES Modules：利用浏览器原生模块系统，无需打包工具即可运行
- Fetch API：现代浏览器内置的HTTP请求接口
- 环境变量：Vite内置的env配置系统
二、Vite脚手架搭建详解
2.1 为什么选择Vite？
在传统的前端开发中，我们通常需要配置复杂的Webpack或Parcel。而Vite的出现彻底改变了这一现状：
Vite的核心优势：
- 极速冷启动：利用浏览器原生ESM，无需打包即可运行
- 即时热更新(HMR)：修改代码后毫秒级更新，开发体验流畅
- 优化的构建：基于Rollup的生产构建，输出高度优化的静态资源
- 开箱即用：零配置即可支持TypeScript、JSX、CSS预处理器等
2.2 项目初始化
我们的项目从一个简单的HTML文件开始，逐步引入Vite：
package.json配置：
{
"name": "vite-demo",
"version": "1.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"devDependencies": {
"vite": "^5.0.0"
}
}
这里的关键是 "type": "module"，它告诉Node.js使用ES模块系统，让我们可以使用import/export语法。
vite.config.js配置：
import { defineConfig } from 'vite'
export default defineConfig({
server: {
port: 3000,
open: true
},
build: {
outDir: 'dist',
assetsDir: 'assets'
}
})
配置文件采用ESM格式，Vite会自动识别并加载。我们配置了：
- 开发服务器端口为3000
- 启动时自动打开浏览器
- 构建输出到
dist目录
2.3 开发工作流
配置完成后，开发流程变得极其简单：
# 安装依赖
npm install
# 启动开发服务器
npm run dev
# 构建生产版本
npm run build
# 预览生产构建
npm run preview
Vite的开发服务器具有智能的模块热更新(HMR)功能，修改代码后页面会即时更新，无需手动刷新。
三、API密钥的安全管理
3.1 为什么需要保护API密钥？
API密钥就像是你的"数字身份证"，一旦泄露可能导致：
- 他人滥用你的API配额
- 产生意外的费用支出
- 数据安全和隐私风险
3.2 常见的错误做法
❌ 错误示例：硬编码在JS文件中
const API_KEY = 'sk-xxxxxxxxxxxxxxxx'; // 千万不要这样做！
这样做的问题：
- 密钥会暴露在版本控制中（Git历史记录）
- 任何人查看源代码都能看到密钥
- 协作开发时难以管理
3.3 Vite环境变量最佳实践
Vite内置了强大的环境变量支持，让我们可以安全地管理敏感信息。
创建.env.local文件：
VITE_DEEPSEEK_API_KEY=your_api_key_here
重要提示：
.env.local文件应该添加到.gitignore中，避免提交到版本控制- 文件名中的
.local表示本地环境配置，不会共享 - Vite只会暴露以
VITE_开头的环境变量给客户端代码
在代码中使用：
const headers = {
'Content-Type': 'application/json',
'Authorization': `Bearer ${import.meta.env.VITE_DEEPSEEK_API_KEY}`
};
import.meta.env是Vite提供的全局对象，可以访问所有以VITE_前缀定义的环境变量。
3.4 安全策略总结
| 策略 | 实现方式 | 安全等级 |
|---|---|---|
| 环境变量 | .env.local文件 | ⭐⭐⭐⭐⭐ |
| Git忽略 | .gitignore配置 | ⭐⭐⭐⭐⭐ |
| 前缀过滤 | VITE_前缀 | ⭐⭐⭐⭐ |
| 变量命名 | 语义化命名 | ⭐⭐⭐ |
四、API调用实现详解
4.1 完整的请求流程
// 1. 定义API端点
const endpoint = 'https://api.deepseek.com/chat/completions';
// 2. 配置请求头（使用环境变量）
const headers = {
'Content-Type': 'application/json',
'Authorization': `Bearer ${import.meta.env.VITE_DEEPSEEK_API_KEY}`
};
// 3. 构建请求体
const payload = {
'model': 'deepseek-chat',
'messages': [
{
'role': 'system',
'content': 'You are a helpful assistant.',
},
{
'role': 'user',
'content': '你好 DeepSeek',
}
],
};
// 4. 发送请求并处理响应
try {
const response = await fetch(endpoint, {
method: 'POST',
headers,
body: JSON.stringify(payload),
});
const data = await response.json();
if (data.choices && data.choices[0]) {
document.getElementById('reply').textContent =
data.choices[0].message.content;
}
} catch (error) {
console.error('请求失败:', error);
}
4.2 关键实现要点
- 使用
type="module"：HTML中引入JS时添加此属性，启用ES模块支持 - 异步处理：使用
async/await处理异步请求，代码更清晰 - 错误处理：使用
try-catch捕获网络错误和API错误 - 数据验证：访问响应数据前检查结构完整性
五、项目结构优化
demo/
├── index.html # 入口HTML文件
├── css/
│ └── style.css # 样式文件
├── js/
│ └── main.js # 主逻辑文件
├── .env.local # 本地环境变量（不提交Git）
├── .env.example # 环境变量示例（可提交Git）
├── .gitignore # Git忽略配置
├── package.json # 项目配置
└── vite.config.js # Vite配置
.gitignore配置：
# 忽略本地环境变量文件
.env.local
.env.*.local
# 忽略依赖目录
node_modules/
# 忽略构建输出
dist/
六、部署注意事项
6.1 生产环境配置
在生产环境中，你需要：
- 在服务器或CI/CD流程中设置环境变量
- 使用Vite的
--mode参数指定构建模式 - 确保生产环境的API密钥具有适当的权限限制
6.2 安全提醒
⚠️ 重要：即使使用了环境变量，客户端代码中的API密钥仍然可能被有心人获取。对于生产级应用，建议：
- 使用后端代理：前端 → 你的后端 → DeepSeek API
- 限制密钥权限：设置IP白名单、使用额度限制
- 监控API使用：定期检查调用日志，发现异常及时处理
七、总结
通过本文的实战项目，我们学习了：
✅ Vite脚手架搭建：从初始化配置到开发工作流的完整流程
✅ 环境变量管理：安全地存储和使用API密钥
✅ API调用实现：完整的HTTP请求流程和错误处理
✅ 项目结构优化：清晰的目录组织和版本控制策略
Vite的简洁高效与环境变量的安全实践相结合，为前端开发提供了现代化的解决方案。无论是个人学习还是团队协作，这些最佳实践都能帮助你构建更专业、更安全的应用。
延伸阅读：
