nuxt-mail

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: 'foo@bar.de',
      },
      smtp: {
        host: "smtp.example.com",
        port: 587,
      },
    }],
  ],
  // or use the top-level option:
  mail: {
    message: {
      to: 'foo@bar.de',
    },
    smtp: {
      host: "smtp.example.com",
      port: 587,
    },
  },
  // or use runtimeConfig
  runtimeConfig: {
    mail: {
      message: {
        to: 'foo@bar.de',
      },
      smtp: {
        host: "smtp.example.com",
        port: 587,
      },
    },
  },
}

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

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

Nuxt 3

通过 composable

<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: 'contact@foo.de' },
        { name: 'support', to: 'support@foo.de' },
      ],
      ...
    }],
  ],
}

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

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: 'foo@gmail.com',
          pass: '<app-specific password>',
        },
      },
    }],
  ],
}

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

缺少什么吗？通过 pull request 在此处添加你的服务。

非常感谢你的支持！❤️

另请参阅

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