Nuxt应用使用nuxt-mail与axios无法发送邮件问题求助

1. 修复表单结构错误 #

你当前将每个输入框单独放在<form>标签内，且提交按钮未关联任何表单，加上按钮类型为submit会触发默认页面刷新，可能中断邮件发送请求。需将所有输入框合并到一个表单中，并阻止默认提交行为：

修改后的模板代码：

<template>
  <div>
    <form @submit.prevent="sendMail">
      <input type="text" v-model="user_data.name" placeholder="Name" />
      <input type="text" v-model="user_data.surname" placeholder="Surname" />
      <input type="tel" v-model="user_data.phone" placeholder="Phone" />
      <input type="email" v-model="user_data.email" placeholder="Email" />
      <button type="submit">submit</button>
    </form>
  </div>
</template>

2. 补充SMTP认证核心配置 #

你的nuxt-mail配置缺少SMTP账号的用户名和密码，这是邮件发送的必要条件。针对Gmail账号：

• 未开启两步验证：需开启低安全性应用访问（不推荐，建议优先用应用专用密码）
• 已开启两步验证：必须使用应用专用密码

修改nuxt.config.js配置：

modules: [
  '@nuxtjs/axios',
  ['nuxt-mail', {
    message: {
      to: 'mymail@gmail.com',
    },
    smtp: {
      host: 'smtp.gmail.com',
      port: 587,
      secure: false, // 587端口填false，465端口填true
      auth: {
        user: 'mymail@gmail.com', // 你的Gmail账号
        pass: 'your-app-password-or-account-password' // 应用专用密码或账号密码
      }
    },
  }],
],

3. 优化邮件内容与格式 #

当前sendMail方法的邮件文本为固定内容，未包含用户输入信息，且from字段需符合合法邮箱格式（Gmail要求发件地址为账号本身或已验证地址）：

修改sendMail方法：

methods: {
  sendMail() {
    this.$mail.send({
      from: `"${this.user_data.name}" <mymail@gmail.com>`, // 用你的Gmail账号作为发件人
      subject: `Candidatura da ${this.user_data.name} ${this.user_data.surname}`,
      text: `
        Nome: ${this.user_data.name}
        Cognome: ${this.user_data.surname}
        Email: ${this.user_data.email}
        Telefono: ${this.user_data.phone}
        Messaggio: Test della mail
      `,
      to: 'mymail@gmail.com',
    }).then(() => {
      alert('邮件发送成功！');
    }).catch(error => {
      console.error('邮件发送失败:', error);
      alert('邮件发送失败，请查看控制台日志');
    });
  },
},

4. 检查Gmail安全设置 #

• 若使用普通账号密码：登录Google账号，进入「安全」页面，开启「低安全性应用访问」
• 推荐方案：开启两步验证后，在「安全」页面创建「应用专用密码」，将其填入SMTP配置的pass字段

5. 借助控制台定位问题 #

发送测试时打开浏览器控制台（F12），查看是否有网络请求错误或JS报错，可快速定位认证失败、SMTP连接超时等具体问题。

内容的提问来源于stack exchange，提问作者Leonardo Gori