nuxt-mail

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

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

安装

# 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>

Nuxt 2

对于 Nuxt 2，您需要安装 @nuxtjs/axios 并将其添加到您的模块列表，放在 nuxt-mail 之前

// nuxt.config.js
export default {
  modules: [
    [
      '@nuxtjs/axios',
      ['nuxt-mail', { /* ... */ }],
    }],
  ],
}

然后，您可以像这样使用注入的变量

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

关于生产环境使用的说明

当您在生产环境中使用 nuxt-mail 并且您配置了一个反向代理来隐藏域后面的 localhost 时，您需要告诉 @nuxt/axios 您正在使用的基本 URL。否则，nuxt-mail 将找不到发送路由。请参阅 @nuxt/axios 选项了解如何执行此操作。最简单的选择是设置 API_URL 环境变量，或在 nuxt.config.js 中设置其他内容

// nuxt.config.js
export default {
  axios: {
    baseURL: process.env.BASE_URL,
  },
}

多个消息配置

也可以通过将 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>',
        },
      },
    }],
  ],
}

缺少某些内容？通过拉取请求在此处添加您的服务。

非常感谢您的支持！ ❤️

另请参阅

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