nuxt-mail

为 Nuxt.js 应用添加发送电子邮件的功能。添加一个服务器路由、一个注入变量，并使用 nodemailer 发送电子邮件。
7.4K 下载301 星v7.0.1
dword-designdword-design

nuxt-mail

npm version Linux macOS Windows compatible Build status Coverage status Dependency status Renovate enabled
Open in Gitpod Buy Me a Coffee PayPal Patreon

为 Nuxt.js 应用添加发送电子邮件的功能。添加一个服务器路由、一个注入变量，并使用 nodemailer 发送电子邮件。

不适用于静态站点（通过 nuxt generate），因为该模块会创建一个服务器路由。

ℹ️ 信息：这个模块是在 Nuxt 2 时代构建的，当时构建服务器路由需要额外的工作。在 Nuxt 3 中，这变得容易得多，所以这个模块基本上只适用于简单的联系表单。如果你想构建更复杂的东西，我建议直接使用 nodemailer 或 nuxt-nodemailer。

安装

# npm
$ npx nuxi module add nuxt-mail

# Yarn
$ yarn nuxi module add nuxt-mail

配置

将模块添加到你的 nuxt.config.js 文件中的 modules 数组中。注意要将其添加到 modules 而不是 buildModules，否则服务器路由将不会生成。

// nuxt.config.js
export default {
  modules: [
    ['nuxt-mail', {
      message: {
        to: '[email protected]',
      },
      smtp: {
        host: "smtp.example.com",
        port: 587,
      },
    }],
  ],
  // or use the top-level option:
  mail: {
    message: {
      to: '[email protected]',
    },
    smtp: {
      host: "smtp.example.com",
      port: 587,
    },
  },
  // or use runtimeConfig
  runtimeConfig: {
    mail: {
      message: {
        to: '[email protected]',
      },
      smtp: {
        host: "smtp.example.com",
        port: 587,
      },
    },
  },
}

smtp 选项是必需的，并直接传递给 nodemailer。有关可用选项，请参阅其文档。此外，你必须通过 message 配置至少传递 to、cc 或 bcc。这是出于安全考虑，这样客户端就无法从你的 SMTP 服务器向任意收件人发送电子邮件。你实际上可以通过 message 配置预配置邮件，因此如果你总是想发送相同主题或发件人地址的电子邮件，你可以在此处进行配置。

该模块注入了 $mail 变量，我们现在用它来发送电子邮件

Nuxt 3

通过可组合项

<script setup>
const mail = useMail()

mail.send({
  from: 'John Doe',
  subject: 'Incredible',
  text: 'This is an incredible test message',
})
</script>

通过注入变量

<script setup>
const { $mail } = useNuxtApp()

$mail.send({
  from: 'John Doe',
  subject: 'Incredible',
  text: 'This is an incredible test message',
})
</script>

通过 Options API

<script>
export default {
  methods: {
    sendEmail() {
      this.$mail.send({
        from: 'John Doe',
        subject: 'Incredible',
        text: 'This is an incredible test message',
      })
    },
  },
}
</script>

多条消息配置

通过将 message 配置更改为数组，也可以提供多个消息配置。

// nuxt.config.js
export default {
  modules: [
    ['nuxt-mail', {
      message: [
        { name: 'contact', to: '[email protected]' },
        { name: 'support', to: '[email protected]' },
      ],
      ...
    }],
  ],
}

然后你可以像这样引用配置

mail.send({
  config: 'support',
  from: 'John Doe',
  subject: 'Incredible',
  text: 'This is an incredible test message',
})

或者通过索引（在这种情况下你不需要 name 属性）

mail.send({
  config: 1, // Resolves to 'support'
  from: 'John Doe',
  subject: 'Incredible',
  text: 'This is an incredible test message',
})

此外，该模块不适用于静态站点（通过 nuxt generate），因为该模块会创建一个服务器路由。

设置常用电子邮件服务

Gmail

您需要设置一个应用专用密码来登录 SMTP 服务器。然后，将以下配置添加到您的 nuxt-mail 配置中。看起来有多种配置 Gmail 的方法，因此最好尝试一下这些选项

// nuxt.config.js
export default {
  modules: [
    ['nuxt-mail', {
      smtp: {
        service: 'gmail',
        auth: {
          user: '[email protected]',
          pass: '<app-specific password>',
        },
      },
    }],
  ],
}

// nuxt.config.js
export default {
  modules: [
    ['nuxt-mail', {
      smtp: {
        host: "smtp.gmail.com",
        port: 587,
        auth: {
          user: '[email protected]',
          pass: '<app-specific password>',
        },
      },
    }],
  ],
}

缺少什么？通过 拉取请求 在此处添加您的服务。

调试邮件错误

如果邮件未发送，您可以使用浏览器开发工具调试错误。如果抛出 500 错误（检查控制台输出），您可以在“网络”选项卡中找到错误消息。对于 Chrome 用户，请打开“网络”选项卡，然后找到“发送”请求。打开它并选择“响应”选项卡。在那里应该显示错误消息。在大多数情况下，它与 SMTP 服务器的身份验证有关。

未解决的问题

“证书链中的自签名证书”错误

有一个问题会抛出上述错误。如果有人知道解决方案，我们将不胜感激 😍。

贡献

你是否缺少某些功能或想贡献？欢迎随时提交问题或拉取请求！⚙️

支持

大家好，我是 Sebastian Landwehr，一名自由网络开发者，我喜欢开发网络应用和开源包。如果您想支持我，让我能持续更新包并构建更多有用的工具，您可以在这里捐赠

给我买杯咖啡  如果您想一次性捐赠。咖啡很不错 😊。
PayPal  如果您喜欢 PayPal，也可以进行一次性捐赠。
Patreon  您可以在这里定期支持我，这非常棒，这样我就可以持续地从事项目。

非常感谢您的支持！❤️

另请参阅

  • nuxt-route-meta：在构建时将 Nuxt 页面数据添加到路由元数据。
  • nuxt-modernizr：为您的 Nuxt.js 应用添加 Modernizr 构建。
  • nuxt-mermaid-string：通过提供其图表字符串，在 Nuxt.js 应用中嵌入 Mermaid 图表。
  • nuxt-content-git：@nuxt/content 的附加模块，根据 git 历史记录替换或添加 createdAt 和 updatedAt 日期。
  • nuxt-babel-runtime：支持 babel 的 Nuxt CLI。灵感来自 @nuxt/typescript-runtime。

许可证

MIT 许可证 © Sebastian Landwehr