最清晰、最实用、直接能跑**的配置方法，分 **Vite 项目** 和 **Vue CLI 项目** 两种

[Borter]

# 📌 TinyRobot 环境变量完整配置教程
我给你**最清晰、最实用、直接能跑**的配置方法，分 **Vite 项目** 和 **Vue CLI 项目** 两种，你照着做就能成功。

---

## 一、环境变量是什么？
TinyRobot 需要 3 个核心环境变量：
1. `VITE_APP_API_BASE_URL`：AI 模型接口地址
2. `VITE_APP_API_KEY`：接口密钥
3. `VITE_APP_MODEL`：使用的模型名称（如 deepseek-chat）

这些信息**不能写死在代码里**，必须放在环境变量文件中。

---

## 二、Vite 项目配置（90% 新项目都用这个）
### 1. 在项目根目录创建文件
文件名：**`.env.local`**
（必须是这个名字，会被自动忽略，不会提交到 Git）

### 2. 写入配置内容
```env
# AI 接口基础地址（必填）
VITE_APP_API_BASE_URL=https://api.deepseek.com

# 你的 API Key（必填）
VITE_APP_API_KEY=sk-xxxxxxxxxxxxxxxxxxxxxxxx

# 使用的模型名称（必填）
VITE_APP_MODEL=deepseek-chat

# 可选：超时时间
VITE_APP_TIMEOUT=10000
```

### 3. 在代码中使用（自动读取）
TinyRobot 会**自动读取**这些变量，你不需要手动导入！

如果你需要手动获取：
```ts
console.log(import.meta.env.VITE_APP_API_BASE_URL)
console.log(import.meta.env.VITE_APP_API_KEY)
```

---

## 三、Vue CLI / Webpack 项目配置
### 1. 创建文件
文件名：**`.env.local`**

### 2. 内容写法
```env
# 注意：Vue CLI 必须以 VUE_APP_ 开头
VUE_APP_API_BASE_URL=https://api.deepseek.com
VUE_APP_API_KEY=sk-xxxxxxxxxxxxxxxx
VUE_APP_MODEL=deepseek-chat
```

### 3. 使用方式
```ts
console.log(process.env.VUE_APP_API_BASE_URL)
```

---

## 四、必须遵守的规则（非常重要）
1. **变量名必须以 `VITE_APP_` 开头**（Vite）
2. 文件必须放在**项目根目录**
3. 不要把 `.env.local` 提交到 Git（已自动忽略）
4. 重启项目才能让新变量生效
5. 接口地址**不要带末尾的 `/chat/completions`**，只写域名部分

---

## 五、最常见错误 & 解决方法
### ❌ 错误1：环境变量不生效
✅ 解决：重启项目 `npm run dev`

### ❌ 错误2：接口跨域
✅ 解决：在 `vite.config.ts` 加代理
```ts
export default defineConfig({
  server: {
    proxy: {
      '/v1': {
        target: 'https://api.deepseek.com',
        changeOrigin: true
      }
    }
  }
})
```

### ❌ 错误3：提示 API Key 不存在
✅ 解决：检查 `.env.local` 是否在根目录，变量名是否正确

---

## 六、我给你一份可直接复制的标准配置
```env
# .env.local
VITE_APP_API_BASE_URL=https://api.deepseek.com
VITE_APP_API_KEY=sk-你的密钥
VITE_APP_MODEL=deepseek-chat
VITE_APP_TIMEOUT=60000
```

---

### 总结
1. 新建 `.env.local` 文件
2. 填入 3 个核心变量
3. 重启项目
4. 完成！TinyRobot 自动读取并连接 AI 接口

需要我帮你检查你的项目配置是否正确吗？你可以把目录结构或文件内容发给我～