EmailJS邮件发送功能实现指南

🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼

操作步骤（图片）

安装依赖命令及Emailjs官网网址

npm install @emailjs/browser    

emailjs

操作步骤（文字）

## 📧 EmailJS邮件发送功能实现总结

### 🎯 目标

为网站联系表单集成真实的邮件发送功能。

### 📋 实现流程

#### 1. 安装依赖

```bash

npm install @emailjs/browser

```

#### 2. EmailJS服务配置

##### 2.1 注册账户

- 访问 https://dashboard.emailjs.com/admin

- 使用Google账户或邮箱注册/登录

##### 2.2 创建邮件服务

- 点击左侧菜单"Email Services"

- 点击"Add New Service"

- 选择"Gmail"

- 点击"Connect Account"并授权Gmail账户

- **⚠️ 重要**：授权时必须勾选"Send email on your behalf"权限

- 记录生成的**Service ID**

##### 2.3 创建邮件模板

- 点击左侧菜单"Email Templates"

- 点击"Create New Template"

- 设置模板名称和内容

- 配置收件人邮箱

- 保存并记录生成的**Template ID**

##### 2.4 获取公钥

- 点击左侧菜单"Account"

- 在"API Keys"部分找到**Public Key**

- 复制此密钥

#### 3. 代码实现

- 创建邮件发送服务文件

- 更新联系表单页面，集成EmailJS

- 配置环境变量文件

- 添加表单状态管理、错误处理

### ⚠️ 遇到的问题及解决

#### 问题1：Gmail API权限错误

**错误**：`412 Gmail_API: Precondition check failed`

**解决**：将QQ邮箱切换成了Gmail邮箱，EmailJS对Gmail支持更稳定

#### 问题2：授权权限不足

**错误**：邮件发送失败，权限不足

**解决**：重新授权Gmail账户，确保勾选"Send email on your behalf"权限

#### 问题3：Service ID识别错误

**错误**：`The service ID not found`

**原因**：Service ID复制错误，字母o和数字0混淆

**解决**：仔细核对Service ID，注意字母和数字的区别

#### 问题4：环境变量未生效

**原因**：修改.env文件后未重启开发服务器

**解决**：重启开发服务器以加载新的环境变量

### 🔧 配置文件设置

#### 环境变量配置 (.env)

```env

VITE_EMAILJS_SERVICE_ID=your_service_id

VITE_EMAILJS_TEMPLATE_ID=your_template_id

VITE_EMAILJS_PUBLIC_KEY=your_public_key

```

#### 邮件模板示例

**主题**：

```

来自{{from_name}}的新消息：{{subject}}

```

**内容**：

```html

<div style="font-family: Arial, sans-serif;">

  <h2>新的联系消息</h2>

  <p><strong>发送者：</strong> {{from_name}}</p>

  <p><strong>邮箱：</strong> {{from_email}}</p>

  <p><strong>主题：</strong> {{subject}}</p>

  <p><strong>内容：</strong></p>

  <p>{{message}}</p>

</div>

```

### 🧪 测试步骤

1. 在EmailJS控制台测试服务连接

2. 本地测试表单提交功能

3. 检查邮箱是否收到邮件

4. 验证错误处理和状态反馈

### 💡 关键要点

1. **授权权限**：连接Gmail时必须勾选"Send email on your behalf"权限

2. **配置准确性**：仔细复制Service ID、Template ID和Public Key，注意字母和数字区别

3. **邮箱选择**：使用Gmail邮箱确保服务稳定性

4. **环境变量**：修改.env文件后需重启开发服务器

5. **安全性**：确保.env文件在.gitignore中，避免泄露配置信息