当前位置：首页 > VUE

vue实现邮件发送

2026-01-08 13:53:05VUE

实现邮件发送的基本思路

在Vue.js中实现邮件发送功能通常需要结合后端服务，因为浏览器端的JavaScript无法直接发送邮件。常见的方案是通过Vue前端收集邮件数据，调用后端API完成实际发送。

前端实现步骤

创建邮件表单组件，包含收件人、主题、正文等字段：

<template>
  <form @submit.prevent="sendEmail">
    <input v-model="email.to" placeholder="收件人邮箱">
    <input v-model="email.subject" placeholder="邮件主题">
    <textarea v-model="email.body" placeholder="邮件内容"></textarea>
    <button type="submit">发送邮件</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      email: {
        to: '',
        subject: '',
        body: ''
      }
    }
  },
  methods: {
    async sendEmail() {
      try {
        const response = await axios.post('/api/send-email', this.email)
        alert('邮件发送成功')
      } catch (error) {
        console.error('发送失败:', error)
      }
    }
  }
}
</script>

后端实现方案

Node.js方案

安装Nodemailer包：

npm install nodemailer

创建邮件服务：

const nodemailer = require('nodemailer')

const transporter = nodemailer.createTransport({
  service: 'Gmail',
  auth: {
    user: 'your@gmail.com',
    pass: 'your-password'
  }
})

app.post('/api/send-email', async (req, res) => {
  const mailOptions = {
    from: 'your@gmail.com',
    to: req.body.to,
    subject: req.body.subject,
    text: req.body.body
  }

  try {
    await transporter.sendMail(mailOptions)
    res.status(200).send('Email sent')
  } catch (error) {
    console.error(error)
    res.status(500).send('Error sending email')
  }
})

PHP方案

使用PHP的mail函数或PHPMailer库：

<?php
header('Content-Type: application/json');

$data = json_decode(file_get_contents('php://input'), true);

$to = $data['to'];
$subject = $data['subject'];
$message = $data['body'];
$headers = 'From: webmaster@example.com' . "\r\n";

if(mail($to, $subject, $message, $headers)) {
    echo json_encode(['status' => 'success']);
} else {
    echo json_encode(['status' => 'error']);
}
?>

安全注意事项

配置CORS允许前端域名访问API接口使用环境变量存储敏感信息如邮箱密码考虑添加验证码防止滥用对用户输入进行过滤防止邮件注入攻击

第三方服务集成

考虑使用SendGrid、Mailgun等专业邮件服务：

// SendGrid示例
const sgMail = require('@sendgrid/mail')
sgMail.setApiKey(process.env.SENDGRID_API_KEY)

const msg = {
  to: req.body.to,
  from: 'your@email.com',
  subject: req.body.subject,
  text: req.body.body
}

sgMail.send(msg)