当前位置：首页 > VUE

vue实现邮件发送

2026-03-28 13:13:04VUE

使用Vue实现邮件发送功能

在Vue中实现邮件发送通常需要结合后端服务，因为前端无法直接发送邮件。以下是几种常见的方法：

使用Node.js后端服务

创建一个简单的Node.js后端服务来处理邮件发送，Vue前端通过API调用该服务。

后端代码示例（Node.js + Nodemailer）

const express = require('express');
const nodemailer = require('nodemailer');
const cors = require('cors');
const app = express();

app.use(cors());
app.use(express.json());

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

app.post('/send-email', (req, res) => {
  const { to, subject, text } = req.body;

  const mailOptions = {
    from: 'your-email@gmail.com',
    to,
    subject,
    text
  };

  transporter.sendMail(mailOptions, (error, info) => {
    if (error) {
      return res.status(500).send(error.toString());
    }
    res.status(200).send('Email sent: ' + info.response);
  });
});

app.listen(3001, () => {
  console.log('Server running on port 3001');
});

Vue前端代码

methods: {
  sendEmail() {
    axios.post('http://localhost:3001/send-email', {
      to: 'recipient@example.com',
      subject: 'Test Email',
      text: 'This is a test email from Vue app'
    })
    .then(response => {
      console.log(response.data);
      alert('Email sent successfully');
    })
    .catch(error => {
      console.error(error);
      alert('Failed to send email');
    });
  }
}

使用第三方邮件服务API

可以直接调用第三方邮件服务如SendGrid、Mailgun等的API，避免自己搭建后端服务。

SendGrid示例

methods: {
  sendEmail() {
    axios.post('https://api.sendgrid.com/v3/mail/send', {
      personalizations: [{
        to: [{ email: 'recipient@example.com' }],
        subject: 'Test Email'
      }],
      from: { email: 'sender@example.com' },
      content: [{
        type: 'text/plain',
        value: 'This is a test email from Vue app'
      }]
    }, {
      headers: {
        'Authorization': 'Bearer YOUR_SENDGRID_API_KEY',
        'Content-Type': 'application/json'
      }
    })
    .then(response => {
      console.log(response.data);
      alert('Email sent successfully');
    })
    .catch(error => {
      console.error(error);
      alert('Failed to send email');
    });
  }
}

使用Formspree等表单服务

对于简单的联系表单，可以使用Formspree等无需后端代码的服务。

Vue模板示例

vue实现邮件发送

<form action="https://formspree.io/your-formspree-id" method="POST">
  <input type="email" name="_replyto" placeholder="Your email">
  <textarea name="message" placeholder="Your message"></textarea>
  <button type="submit">Send</button>
</form>