前端如何最简单的接入邮件服务

1月 14 2026 4 分钟读完 (约 599 字) 阅读量

这里我选择了 Resend https://resend.com/这个邮件服务，无需自己去想办法和花时间实现各种功能，也无需去维护服务器之类的，直接选择现成的稳定服务，然后专注于产品本身。操作起来也非常简单，如果你有兴趣，接着往下看。
你可以按照我都步骤来接入邮件服务。有什么问题评论区告诉我，看到了都会回复。

Resend

Resend 免费额度：3,000 邮件/月 100 邮件/天优点：开发者友好，API 和 SDK 支持，模板系统，投递率高

注册账户

访问 Resend 官网 https://resend.com/ 并点击注册按钮，建议使用 Google/GitHub 账号直接登录

API Key

进入API Keys页面，创建 API Key

添加域名

进入Domains页面，添加域名

域名添加完成后，需要配置 DNS：手动添加记录，（阿里买的域名需要在域名控制台添加记录）等几分钟后这里就验证成功了。

添加模版

进入Templates页面，添加模版

写网页一样写邮件模板，只需要在模版中添加变量，然后在代码中替换变量即可。

接入代码

pnpm add resend -D

// server/api/send.get.ts
import { Resend } from "resend";
const config = useRuntimeConfig()

export default defineEventHandler(async (event) => {
  const requestURL = getRequestURL(event)
  const query = getQuery(event)
  const resend = new Resend(config.resendApiKey);
  const response = await resend.emails.send({
    from: "noreply@yourdomain.com",
    to: query.email as string,
    subject: "Login Verification Code",
    template: {
      id: 'active-email',
      variables: {
        URL: `${requestURL.origin}/activeEmail?verifyCode=${query.verifyCode}`,
      },
    },
  });
  if (response.error) {
    throw createError({
      statusCode: 500,
      message: "Error sending email",
    });
  }
  // if(response?.headers?.['ratelimit-remaining'] === '0') {
  //   throw createError({
  //     statusCode: 429,
  //     message: "Email sending rate limit exceeded",
  //   });
  // }

  return {
    response
  };
});