使用 nuxt-mail 在 Nuxt.js 中发送邮件

关键词：

【中文标题】使用 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.js 项目中使用 Express.js

】在现有Nuxt.js项目中使用Express.js【英文标题】：UseExpress.jsinanexistingNuxt.jsproject【发布时间】：2018-12-0407:50:29【问题描述】：我有一个使用Nuxt.js构建的项目，我想使用express来报告我的asyncData方法等的bugsnag错误。我将如何导入它... 查看详情

Tabulator + Nuxt.js：如何在回调中使用 axios？

】Tabulator+Nuxt.js：如何在回调中使用axios？【英文标题】：Tabulator+Nuxt.js:Howtouseaxiosincallbacks?【发布时间】：2020-01-1608:48:53【问题描述】：我尝试在我的Nuxt.js项目中添加Tabulator。我已经完成了下一个组件：<template><divref="table... 查看详情

在 Nuxt.js 项目中使用 normalize.css 的最佳方式是啥？

】在Nuxt.js项目中使用normalize.css的最佳方式是啥？【英文标题】：Whatisthebestwayofusingnormalize.cssinNuxt.jsprojects?在Nuxt.js项目中使用normalize.css的最佳方式是什么？【发布时间】：2019-12-1414:44:25【问题描述】：我使用npxcreate-nuxt-app命令... 查看详情

Nuxt.js - 如何在布局内使用布局

】Nuxt.js-如何在布局内使用布局【英文标题】：Nuxt.js-Howtouselayoutinsidelayout【发布时间】：2019-01-2710:58:07【问题描述】：我有我的默认布局，我想制作一个页面带有布局和布局内部的组件将更改insdie并将url更改为我如何用nuxt做到... 查看详情

如何使用 laravel 后端 API 在 nuxt.js 中上传图片

】如何使用laravel后端API在nuxt.js中上传图片【英文标题】：howtouploadimageinnuxt.jsusinglaravelbackendAPI【发布时间】：2021-01-2407:29:30【问题描述】：nuxt.js我搜索了很多关于使用laravelapi上传图片的教程，但我不知道如何编码图片上传的东... 查看详情

在 Nuxt.js 中使用 Vue-Meta 内联 Js

】在Nuxt.js中使用Vue-Meta内联Js【英文标题】：InlineJswithVue-MetaInNuxt.js【发布时间】：2020-01-2407:34:13【问题描述】：基本上，我使用Nuxt2.9.2，并尝试使用innerHTML方法内联GoogleOptimize脚本，但每当我运行npmrungenerate时，即使__dangerouslyDis... 查看详情

如何在 Nuxt.js 中使用官方 Swiper.js 作为插件

】如何在Nuxt.js中使用官方Swiper.js作为插件【英文标题】：HowtouseofficialSwiper.jsasplugininNuxt.js【发布时间】：2021-01-2106:39:49【问题描述】：我有插件swiper.js代码：importVuefrom"vue";//importSwipercoreandrequiredcomponentsimportSwiperCore,Navigation,Pagina... 查看详情

如何在 Nuxt.js 中使用 CKEditor - 未定义窗口错误

】如何在Nuxt.js中使用CKEditor-未定义窗口错误【英文标题】：HowtouseCKEditorwithNuxt.js-windowisnotdefinederror【发布时间】：2020-08-1503:00:36【问题描述】：在Vue.js中，这是我使用的设置。在Nuxt.js中，我收到“未定义窗口”错误。根据我的... 查看详情

在nuxt.js中怎么使用vux

参考技术A把this换成Vue就好了Vue.$vux.alert.show(title:'哎呀！',content:'您的信息还在审核中',); 查看详情

仅使用 NUXT.js 生成静态 html

】仅使用NUXT.js生成静态html【英文标题】：UsingNUXT.jsjustforstatichtmlgeneration【发布时间】：2018-07-2223:07:27【问题描述】：谁能帮帮我？nuxt有任何选项可以在生成模式下排除_nuxt脚本吗？我只需要生成Vue应用程序的静态html版本。没有... 查看详情

如何使用 jest 在 nuxt.js 中测试 head()

】如何使用jest在nuxt.js中测试head()【英文标题】：Howtotesthead()innuxt.jsusingjest【发布时间】：2020-05-1418:26:53【问题描述】：我正在使用带有Jest的Nuxt.js进行单元测试。我在布局中添加了一个head函数来更改标题，我想对其进行单元测... 查看详情

如何在nuxt.js中实现handsontable

...布时间】：2020-06-2608:31:04【问题描述】：我正在尝试在我使用的项目上安装handsontablenpminstallhandsontable@handsontable/vue也许我需要创建一个插件？如何在现有的nuxt项目中使用handsontable？【问题讨论】：【参考方案 查看详情

如何在 nuxt.js 中定义路由

....js【发布时间】：2019-04-2421:11:53【问题描述】：我有一个使用Nuxt.Js的博客网站，假设xyz.com并希望显示特定国家/地区代码的所有页面，例如xyz.com/en/home、xyz.com/en/about等。，目的是显示所有国家/地区的博客，它不是多语言网站仅... 查看详情

如何使用 Nuxt.js 在 vuex 状态中获取本地存储数据

】如何使用Nuxt.js在vuex状态中获取本地存储数据【英文标题】：HowtogetlocalstoragedatainsidevuexstatewithNuxt.js【发布时间】：2019-06-1113:32:09【问题描述】：我正在使用Nuxt构建一个购物车。但是当我刷新页面时，购物篮会自动清空。我尝... 查看详情

使用 nuxt.js 和 vue.js 在 <template> 标记内加载脚本

】使用nuxt.js和vue.js在<template>标记内加载脚本【英文标题】：Loadscriptinsidethe<template>tagusingnuxt.jsandvue.js【发布时间】：2018-05-0717:29:21【问题描述】：我正在使用nuxt.js（基于vue.js）构建自定义网站，我需要使用合作伙伴提... 查看详情

如何在 nuxt js 中使用 vuetify 作为插件？

】如何在nuxtjs中使用vuetify作为插件？【英文标题】：Howtousevuetifyinnuxtjsasplugin?【发布时间】：2020-04-2321:43:53【问题描述】：我需要在我的nuxtjs项目中使用vuetify作为插件。我试过包@nuxtjs/vuetify，但得到错误无法分配给对象“#”的... 查看详情

如何在 Nuxt.js (Vue.js) 中使用 vue-infinite-loading

】如何在Nuxt.js(Vue.js)中使用vue-infinite-loading【英文标题】：Howtousevue-infinite-loadinginNuxt.js(Vue.js)【发布时间】：2017-10-2807:01:42【问题描述】：我在Nuxt.js(Vue.js)中开发网络应用程序首先，vueinitnuxt/expressMyProject~page/help.vue<template><... 查看详情

Nuxt.js env 属性，理解以及如何使用？

】Nuxt.jsenv属性，理解以及如何使用？【英文标题】：Nuxt.jsenvProperty,understandingandhowtouseit?【发布时间】：2020-08-2911:25:58【问题描述】：关注https://nuxtjs.org/api/configuration-env我一直在尝试为整个项目在nuxt.config.jsonce中设置我的apiUrl，... 查看详情