当前位置：首页 > VUE

vue实现发邮件功能

2026-02-24 03:25:57VUE

使用Vue实现发邮件功能

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

使用Node.js后端服务

通过Vue前端调用Node.js后端API，后端使用Nodemailer库发送邮件。

安装Nodemailer：

npm install nodemailer

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

const express = require('express');
const nodemailer = require('nodemailer');
const bodyParser = require('body-parser');
const cors = require('cors');

const app = express();
app.use(cors());
app.use(bodyParser.json());

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

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

  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组件中调用API：

vue实现发邮件功能

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

使用第三方邮件服务API

可以直接调用第三方邮件服务如SendGrid、Mailgun等的API。

安装SendGrid：

npm install @sendgrid/mail

后端代码示例：

vue实现发邮件功能

const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
const sgMail = require('@sendgrid/mail');

const app = express();
app.use(cors());
app.use(bodyParser.json());

sgMail.setApiKey('your-sendgrid-api-key');

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

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

  sgMail.send(msg)
    .then(() => {
      res.status(200).send('Email sent');
    })
    .catch(error => {
      res.status(500).send(error.toString());
    });
});

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

使用Firebase云函数

如果使用Firebase，可以通过云函数发送邮件。

安装Firebase工具：

npm install -g firebase-tools
firebase init functions

云函数代码：

const functions = require('firebase-functions');
const nodemailer = require('nodemailer');
const cors = require('cors')({origin: true});

exports.sendEmail = functions.https.onRequest((req, res) => {
  cors(req, res, () => {
    const { to, subject, text } = req.body;

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

    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);
    });
  });
});

Vue中调用：

methods: {
  sendEmail() {
    axios.post('https://your-firebase-project.cloudfunctions.net/sendEmail', {
      to: 'recipient@example.com',
      subject: 'Test Email',
      text: 'This is a test email from Vue app'
    })
    .then(response => {
      console.log(response.data);
    })
    .catch(error => {
      console.error(error);
    });
  }
}