使用 nuxt-mail 在 Nuxt.js 中發送郵件

Question

我是 Nuxt.js/Vue.js 的新手，所以這里有一些新手問題：D

我在從 Nuxt.js 應用程序中的聯系人發送郵件時遇到問題。 我正在嘗試使用 nuxt-mailer，但無法使其正常工作。 我已經安裝了axios和nuxt-mail 。

我得到 500（內部服務器錯誤）。

所以我在nuxt.config.js中添加了這個：

'@nuxtjs/axios',
['nuxt-mail', {
  message: {
    to: 'my-email',
  },
  smtp: {
    host: "localhost",
    port: 587,
  },
}],

我應該把郵件放在我想在“收件人”中接收郵件的地方嗎？ 我應該只在host中使用localhost還是http://localhost ？ 最后，我應該為“端口”加上什么雙關語？ 那是 3000 作為我本地主機上的帖子嗎？

好的，接下來，我在組件中的表單如下所示：

<template>
  <div class="container">
    <form>    
      <label for="name">Ditt namn</label>            
      <input id="name" type="text" v-model="name"/>

      <label for="email">Din epostadress</label>            
      <input id="email" type="email" v-model="email"/>

      <label for="phone">Telefon</label>            
      <input id="phone" type="phone" v-model="phone"/>

      <label for="message"> Meddelande: </label>
      <textarea id="message" v-model="message"/>
      
      <button type="submit" @click.prevent="send">Send email </button>
    </form>
   </div>
</template>

腳本如下所示：

<script>
export default {
    data: () => ({
    name: '',
    email: '',
    phone: '',
    message: '',
  }),
  methods: {
    send() {
        this.$mail.send({
        name: this.name,
        from: this.email,
        phone: this.phone,
        subject: 'Message from contact-form',
        text: this.message,
      })
    }
  }
}
</script>

那么可能是什么問題？ 想知道我是否在 nuxt.config.js 文件中做錯了什么？ 但我一點也不知道。

希望有人可以幫助:)

Answer 1

我一不小心成為了 nuxt-mail 的開發者：）。 剛剛在處理模塊時發現了這篇文章。

所以，kissu 已經提到了最相關的事情。 您需要一個正在運行的郵件服務器，localhost 在這里不起作用（並且可能是源問題）。 你可以做的是看看Mailtrap 。 它基本上可以滿足您的需求，這意味着它提供了一個用於測試和本地開發的郵件服務器。 電子郵件將進入一個特殊的收件箱，您可以代表您檢查和清空該收件箱。 您甚至可以使用 API 檢查收件箱。

希望這會有所幫助，如果您碰巧正在使用 nuxt-mail，如果有任何問題，請隨時提出問題，或者在Twitter上寫信給我。

Answer 2

查看自述文件和nodemailer的相關頁面，它看起來像這樣：

• to指的是接收方的實際 email 地址，類似於kuro@yourdomain.com
• host 需要是一個有效的托管 SMTP 服務器，所以 localhost 在這里可能不是一個好的服務器，因為一旦投入生產，它將 100% 無法工作
• 端口基本上取決於 SMTP 配置： defaults to 587 if is secure is false or 465 if true （來自nodemailer文檔）

如果您將使用 Nuxt 應用程序的節點部分，這里有一篇博客文章來設置一些電子郵件： https://blog.lichter.io/posts/emails-through-nuxtjs/

這是一篇關於如何特別使用nuxt-mail博文： https://dword-design.de/blog/sending-emails-with-nuxt-js-the-easy-way/

借助 Mailgun、Sendgrid、Mailchimp 等，您仍然需要在 Mailtrap 上使用郵件發送服務來完成這項工作。

---

您還可以為此使用 Netlify 函數： https://css-tricks.com/netlify-functions-for-sending-emails/或任何其他無服務器函數

正如您所看到的，配置並非微不足道，有多種方法可以實現這一點，但它本質上歸結為使用外部服務，特別是如果您打算只使用全靜態。