新版本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: 'qq',
            port: 587, // SMTP 埠
            secure: false,
            // secureConnection: true, // 使用 SSL
            auth: {
                user:你的郵箱,
                //這裡密碼不是qq密碼，是你設定的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: '<b>Hello world ?</b>' // 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/79889081

• 留意一下： 啟動的server.js的埠是8081，vue-cli啟動的埠是 8080 。

修改代理，開啟config/index.js 新增以下程式碼

    proxyTable: {
        '/api': {
            target: 'http://localhost:8081', // 介面的域名
            // secure: false,  // 如果是https介面，需要配置這個引數
            changeOrigin: true, // 如果介面跨域，需要進行這個引數配置
            // pathRewrite: {
            //     '^/api': ''
            // }
        }
    }
 

• 發郵件的email.vue檔案是：

<template>
  <div class="hello">
    <div class="input-div">
      <label for="name">姓名</label>
      <input type="text" name="name" v-model.trim="name">
    </div>
    <div class="input-div">
      <label for="email">郵箱</label>
      <input type="text" name="email" v-model.trim="email">
    </div>
    <button @click="submit">提交</button>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  name: 'HelloWorld',
  data() {
    return {
      name: '',
      email: ',
    };
  },
  methods: {
    submit() {
      if (!this.name) {
        alert('請填寫姓名');
        return;
      } else if (!this.email) {
        alert('請填寫手機號');
        return;
      } else {
        let formData = {
          name: this.name,
          email: this.email,
        };
        axios({
          method: 'post',
          url: '/api/email',
          data: formData,
        });
      }
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

 

線上測試地址： http://zhooson.cn:4000/#/

• 部署
  
• dist的檔案 是npm run build 出來的檔案
• vue-nodemailer-4000.js 的內容就是 server.js 的內容
• 線上需要的手動安裝的vue-nodemailer-4000.js 裡面所需npm包
• pm2 start vue-nodemailer-4000.js （我線上起的4000埠）
• 訪問你的地址