当前位置：首页 > VUE

vue实现发送邮件

2026-01-18 17:22:51VUE

实现Vue中发送邮件的方法

在Vue项目中发送邮件通常需要后端服务的支持，以下是几种常见实现方式：

使用Node.js后端服务

创建简单的Node.js邮件服务，Vue前端通过axios调用：

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

const express = require('express');
const nodemailer = require('nodemailer');
const app = express();
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(3000, () => console.log('Server running on port 3000'));

Vue组件调用示例：

vue实现发送邮件

methods: {
  async sendEmail() {
    try {
      const response = await axios.post('http://localhost:3000/send-email', {
        to: 'recipient@example.com',
        subject: 'Test Email',
        text: 'This is a test email from Vue app'
      });
      console.log(response.data);
    } catch (error) {
      console.error(error);
    }
  }
}

使用第三方邮件服务API

直接调用如SendGrid、Mailgun等服务的API：

安装axios：

vue实现发送邮件

npm install axios

Vue组件中使用SendGrid示例：

import axios from 'axios';

export default {
  methods: {
    async sendWithSendGrid() {
      const data = {
        personalizations: [{
          to: [{ email: 'recipient@example.com' }],
          subject: 'Hello from Vue'
        }],
        from: { email: 'sender@example.com' },
        content: [{
          type: 'text/plain',
          value: 'This email was sent from a Vue application'
        }]
      };

      try {
        const response = await axios.post(
          'https://api.sendgrid.com/v3/mail/send',
          data,
          {
            headers: {
              'Authorization': `Bearer YOUR_SENDGRID_API_KEY`,
              'Content-Type': 'application/json'
            }
          }
        );
        console.log('Email sent successfully');
      } catch (error) {
        console.error('Error sending email:', error);
      }
    }
  }
}

使用浏览器端邮件客户端

通过mailto链接触发用户默认邮件客户端：

<template>
  <button @click="sendMail">Send Email</button>
</template>

<script>
export default {
  methods: {
    sendMail() {
      const subject = encodeURIComponent('Test Subject');
      const body = encodeURIComponent('This is the email body');
      window.location.href = `mailto:recipient@example.com?subject=${subject}&body=${body}`;
    }
  }
}
</script>