nuxt-mail

为 Nuxt.js 应用添加发送电子邮件的功能。添加了一个服务器路由、一个注入变量，并使用 nodemailer 发送电子邮件。
6.5K 下载303 星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