[英]Sending mail in Nuxt.js with nuxt-mail
I am a total newbie at Nuxt.js/Vue.js so here are some newbie questions:D我是 Nuxt.js/Vue.js 的新手,所以这里有一些新手问题:D
I am having problems with sending mail from a contact from in my Nuxt.js application.我在从 Nuxt.js 应用程序中的联系人发送邮件时遇到问题。 I am trying to use nuxt-mailer but I can't make it work.
我正在尝试使用 nuxt-mailer,但无法使其正常工作。 I have installed
axios
and nuxt-mail .我已经安装了
axios
和nuxt-mail 。
I get 500 (Internal Server Error).我得到 500(内部服务器错误)。
So I am adding this in nuxt.config.js
:所以我在
nuxt.config.js
中添加了这个:
'@nuxtjs/axios',
['nuxt-mail', {
message: {
to: 'my-email',
},
smtp: {
host: "localhost",
port: 587,
},
}],
Am I supposed to put the mail where I want to receive the mail in the 'to'?我应该把邮件放在我想在“收件人”中接收邮件的地方吗? And am should I pit just
localhost
in host
or http://localhost
?我应该只在
host
中使用localhost
还是http://localhost
? And lastly what should I pun for 'port'?最后,我应该为“端口”加上什么双关语? Is that 3000 as the post on my localhost?
那是 3000 作为我本地主机上的帖子吗?
Okay next, my form in the component likes like this:好的,接下来,我在组件中的表单如下所示:
<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>
and the script lokes like this:脚本如下所示:
<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>
So what can be the problem?那么可能是什么问题? A wonder if I am doing something wrong in the nuxt.config.js file?
想知道我是否在 nuxt.config.js 文件中做错了什么? But i don't know at all.
但我一点也不知道。
Hope someone can help:)希望有人可以帮助:)
I accidentally happen to be the developer of nuxt-mail:).我一不小心成为了 nuxt-mail 的开发者:)。 Just found this post while working on the module.
刚刚在处理模块时发现了这篇文章。
So, kissu already mentioned most relevant things.所以,kissu 已经提到了最相关的事情。 You need a running mail server, localhost won't work here (and will likely be the source issue).
您需要一个正在运行的邮件服务器,localhost 在这里不起作用(并且可能是源问题)。 What you can do is have a look at Mailtrap .
你可以做的是看看Mailtrap 。 It basically does what you are looking for, meaning it provides a mail server for testing and local development.
它基本上可以满足您的需求,这意味着它提供了一个用于测试和本地开发的邮件服务器。 Emails will land in a special inbox that you can inspect and empty at your behalf.
电子邮件将进入一个特殊的收件箱,您可以代表您检查和清空该收件箱。 You can even use an API to check the inbox.
您甚至可以使用 API 检查收件箱。
Hope this helps, if you happen to be using nuxt-mail, feel free to file an issue if there's anything, or write me on Twitter .希望这会有所帮助,如果您碰巧正在使用 nuxt-mail,如果有任何问题,请随时提出问题,或者在Twitter上写信给我。
Looking at the readme and the related page of nodemailer , it looks like that:查看自述文件和nodemailer的相关页面,它看起来像这样:
to
refers to the actual email address of the receiver, something like kuro@yourdomain.com
to
指的是接收方的实际 email 地址,类似于kuro@yourdomain.com
defaults to 587 if is secure is false or 465 if true
(from nodemailer
documentation)defaults to 587 if is secure is false or 465 if true
(来自nodemailer
文档) Here is a blog article to setup some emails IF you will be using the node part of your Nuxt app: https://blog.lichter.io/posts/emails-through-nuxtjs/如果您将使用 Nuxt 应用程序的节点部分,这里有一篇博客文章来设置一些电子邮件: https://blog.lichter.io/posts/emails-through-nuxtjs/
Here is a blogpost on how to especially use nuxt-mail
: https://dword-design.de/blog/sending-emails-with-nuxt-js-the-easy-way/这是一篇关于如何特别使用
nuxt-mail
博文: https://dword-design.de/blog/sending-emails-with-nuxt-js-the-easy-way/
You will still need a mail sending service to have this work, on Mailtrap thanks to Mailgun, Sendgrid, Mailchimp or alike.借助 Mailgun、Sendgrid、Mailchimp 等,您仍然需要在 Mailtrap 上使用邮件发送服务来完成这项工作。
You can also use Netlify functions for that: https://css-tricks.com/netlify-functions-for-sending-emails/ or any other serverless functions您还可以为此使用 Netlify 函数: https://css-tricks.com/netlify-functions-for-sending-emails/或任何其他无服务器函数
As you can see, the configuration is not trivial and there are several ways to achieve this but it essentially comes down of using an exernal service, especially if you plan on going full-static only.正如您所看到的,配置并非微不足道,有多种方法可以实现这一点,但它本质上归结为使用外部服务,特别是如果您打算只使用全静态。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.