vue 项目实现发 邮件 的功能

vue 项目实现发邮件的功能

全栈程序员-站长 • 2026年3月17日下午11:09 • 未分类 • 阅读 0

本文以为例子， 其他邮箱参考：node_modules/nodemailer/well-known/services.json
新版本vue-cli 生成已经木有server的文件，需要我们手动来创建一个server.js 在更目录下（和index.html同级）

server.js （下面的相关参数已经隐藏起来，请用自己的邮箱测试，谢谢）

var path = require('path')
var express = require('express')
var webpack = require('webpack')
var nodemailer = require("nodemailer");

// 加载body-parser 处理post提交过来的数据
var bodyParser = require('body-parser');
var app = express()
var apiRoutes = express.Router()

app.use('/', express.static('./dist'))

// bodyParser 设置,自动会在req上面添加
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
apiRoutes.post('/email', function(req, res) {
    console.info('req', req.body.name, req.body.email)
    var text = `这个人姓名叫${req.body.name }邮箱是${req.body.email}，欢迎骚扰`

    if (req.body.name && req.body.email) {
        res.json({
            iRet: 1,
            info: 'ok',
        });

        // Use Smtp Protocol to send Email
        var transporter = nodemailer.createTransport({
            //https://github.com/andris9/nodemailer-wellknown#supported-services 支持列表
            service: '',
            port: 587, // SMTP 端口
            secure: false,
            // secureConnection: true, // 使用 SSL
            auth: {
                user:你的邮箱,
                //这里密码不是密码，是你设置的smtp密码
                pass: XXXXXXXX
            }
        });

        // setup e-mail data with unicode symbols
        var mailOptions = {
            to: req.body.email,
            from: 你的邮箱, // 这里的from和 上面的user 账号一样的
            subject: '我在学习发邮件', // 标题
            //text和html两者只支持一种
            text: text, // 标题
            // html: 'Hello world ?' // html 内容
        };

        transporter.sendMail(mailOptions, function(error, info) {
            if (error) {
                return console.log(error);
            }
            console.log('邮件发送: ' + info.response);
            transporter.close();
        });

    } else {
        res.json({
            iRet: -1,
            info: 'error',
        });
        return;
    }
});
app.use('/api', apiRoutes)


app.listen(8081, function() {
    console.info('复制打开浏览器', 'localhost:8081')
})

上面获取相关参数pass的方法参考：https://blog.csdn.net/Zhooson/article/details/

留意一下：启动的server.js的端口是8081，vue-cli启动的端口是 8080 。

修改代理，打开config/index.js 添加以下代码

 proxyTable: { '/api': { target: 'http://localhost:8081', // 接口的域名 // secure: false, // 如果是https接口，需要配置这个参数 changeOrigin: true, // 如果接口跨域，需要进行这个参数配置 // pathRewrite: { // '^/api': '' // } } }