邮件(Resend)
Nuxt 模板中基于 Resend 的事务性邮件。
事务邮件通过一个轻量提供商抽象完整接入。验证邮件、密码重置与联系消息均
遵循同一路径:sendEmail → ResendProvider → 本地化 Vue Email 模板。
已提供的能力
MailProvider接口,支持模板邮件与原始邮件。- 按
websiteConfig.mail.provider延迟初始化提供商。 - 使用
NUXT_RESEND_API_KEY的 Resend 投递。 - 通过中英文语言包渲染 Vue Email。
- 已接通 Better Auth 验证/重置与联系表单。
- 附带 newsletter 模板资源,但没有订阅业务流程。
重要文件
| 文件 | 作用 |
|---|---|
server/email/types.ts | 模板名、提供商接口与发送结果类型 |
server/email/index.ts | 提供商生命周期、sendEmail、模板/语言映射与 getTemplate |
server/email/provider/resend.ts | Resend 实现与默认发件人 |
server/email/templates/*.vue | Vue Email 事务模板 |
app/components/email/* | 共用邮件布局与按钮 |
server/utils/auth.ts | Better Auth 验证与重置调用 |
server/api/contact.post.ts | 校验后的联系消息投递 |
app/config/website-config.ts | 提供商、发件人与支持邮箱 |
配置
设置邮件身份
把 websiteConfig.mail.fromEmail 改为已验证域名的发件地址,把
supportEmail 改为接收联系表单的邮箱。除非实现了另一个 MailProvider,
否则保持 provider: "resend"。
验证域名
按 Resend 要求添加 DNS 记录并等待验证。生产邮件必须使用允许的 From 地址; 仅有 API key 并不足够。
模板与上下文
getTemplate() 会选择 Vue 组件,注入 locale 与对应的
en-us.json/zh-cn.json,通过 @vue-email/render 生成 HTML,并派生纯文本
备用内容。主题来自语言包中的 mail 文案。
| 模板键 | 组件 | 已接通流程传入的上下文 |
|---|---|---|
verifyEmail | verify-email.vue | url、name |
forgotPassword | forgot-password.vue | url、name |
contactMessage | contact-message.vue | name、email、subject、message |
subscribeNewsletter | subscribe-newsletter.vue | name |
Better Auth 在 server/utils/auth.ts 调用前两个模板,但目前没有传可选的
locale,所以验证与重置邮件会回退为英文。如需双语认证邮件,应显式传入用户
语言。联系接口用 Zod 校验请求,将 contactMessage 发到 supportEmail,并在
表单传入语言时按该语言渲染。
subscribe-newsletter.vue 只是可复用模板资源。starter 不包含订阅接口、订阅者
持久化、确认流程或退订处理。
自定义或新增提供商
修改 Vue 模板时,同时更新两个语言 JSON 中的 mail.* 键。新增语言还需扩展
server/email/index.ts 的 messagesMap。
若要替换 Resend,实现 MailProvider,在 initializeMailProvider() 中初始化,
并保留现有 sendEmail() 调用点。新实现应返回结构化错误,同时支持 HTML 与
纯文本。
验证
- 注册用户并收到验证邮件(目前默认英文)。
- 请求重置密码,链接能到达重置页。
- 提交
/contact,配置的支持邮箱收到消息。 - 显式以
en/zh渲染模板;接通认证语言后,再检查两种语言的主题、正文、 链接与响应式布局。 - 发送失败可在应用日志和 Resend 控制台中追踪。
生产注意事项
监控投递、退信与投诉;若邮件属于关键业务,增加队列或重试。不要记录正文或 收件人等敏感信息。配置 SPF/DKIM/DMARC,确保验证链接使用生产域名,并在启用 强制邮箱验证前测试发件限制。
