使用 nuxt-mail 在 Nuxt.js 中发送邮件
Posted
技术标签:
【中文标题】使用 nuxt-mail 在 Nuxt.js 中发送邮件【英文标题】:Sending mail in Nuxt.js with nuxt-mail 【发布时间】:2021-07-10 11:05:47 【问题描述】:我是 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
或http://localhost
中进站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 文件中做错了什么?但我根本不知道。
希望有人可以提供帮助:)
【问题讨论】:
您打算在静态站点还是节点托管站点中使用它?我问是因为它不适用于完全静态的服务,因为在这种情况下,您可能会寻找完全不同的服务 IMO。 不,不在静态站点上。它将位于节点主机上。 好的,所以我的回答仍然有效。 是的,谢谢您的帮助!我认为这是您描述的问题,它不适用于本地主机。我对此完全陌生,所以我什至没有想到,所以感谢您向我指出这一点!我会看看你提到的邮件发送服务。 【参考方案1】:我偶然碰巧成为了 nuxt-mail 的开发者 :)。刚刚在开发模块时发现了这篇文章。
所以,kissu 已经提到了最相关的事情。您需要一个正在运行的邮件服务器,localhost 在这里不起作用(并且可能是源问题)。你可以看看Mailtrap。它基本上可以满足您的需求,这意味着它提供了一个用于测试和本地开发的邮件服务器。电子邮件将放在一个特殊的收件箱中,您可以代表您检查和清空该收件箱。您甚至可以使用 API 检查收件箱。
希望这对您有所帮助,如果您碰巧在使用 nuxt-mail,如果有任何问题,请随时 file an issue,或者写信给我 Twitter。
【讨论】:
是的,我刚刚尝试使用 Mailtrap,一切正常!感谢您的回答和一个伟大的模块。 :)【参考方案2】:看了nodemailer的readme和相关页面,是这样的:
to
指的是收件人的实际电子邮件地址,例如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/ 或任何其他 serverless functions
如您所见,配置并不简单,有多种方法可以实现这一点,但它本质上归结为使用外部服务,特别是如果您打算只使用全静态。
【讨论】:
我刚刚尝试使用 Mailtrap,一切正常!感谢所有的帮助。 :)以上是关于使用 nuxt-mail 在 Nuxt.js 中发送邮件的主要内容,如果未能解决你的问题,请参考以下文章
Tabulator + Nuxt.js:如何在回调中使用 axios?