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 并且您配置了一个反向代理将您的本地主机隐藏在域名后面时，您需要告诉 @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：通过提供其图表字符串将 Mermaid 图表嵌入到 Nuxt.js 应用程序中。
nuxt-content-git：@nuxt/content 的附加模块，用于根据 Git 历史记录替换或添加 createdAt 和 updatedAt 日期。
nuxt-babel-runtime：支持 babel 的 Nuxt CLI。受 @nuxt/typescript-runtime 启发。