Vue.js如何调用服务端JS方法实现按钮点击触发邮件发送

你当前的核心问题是混淆了前端与服务端的代码运行边界：

• store目录下的Vuex代码运行在用户浏览器中，属于前端层，无法调用nodemailer这类仅能在Node.js环境运行的服务端依赖
• 前端无法直接引用、调用服务端js文件内的方法，前后端通信只能通过HTTP/HTTPS接口完成

1. 改造服务端代码，暴露邮件发送接口 #

首先把你原有nodemailer逻辑重构为可通过HTTP调用的接口，移除默认绑定的定时触发逻辑（若需保留定时任务可单独留存，和手动触发逻辑互不干扰）。以下以Express框架为例：

注意：你原有邮件代码存在语法错误：socketTimeout配置被错误写到了sendMail回调函数内，且输出日志行多了冗余的line字符，需要修正。

1. 新建邮件路由文件（比如服务端目录下的routes/mail.js）：

const express = require('express');
const router = express.Router();
const nodemailer = require('nodemailer');

// 全局复用邮件传输实例，避免每次请求重复创建连接
const transporter = nodemailer.createTransport({
    host: "**", // 你的SMTP服务地址
    secure: false, 
    port: **, // SMTP服务端口
    tls: {
        rejectUnauthorized: false
    },
    socketTimeout: 30 * 1000 // 超时配置移到正确位置
});

// 定义发送邮件的POST接口
router.post('/send-mail', async (req, res) => {
    try {
        // 从请求体读取前端传入的邮件参数
        const { to, subject, html, cc } = req.body;
        if (!to) {
            return res.status(400).send({ code: 400, msg: '收件人地址不能为空' });
        }

        const mailOptions = {
            from: 'anything@mail.com', // 发件人地址
            to: to, // 收件人地址从前端传入
            cc: cc || '',
            subject: subject || '默认邮件主题',
            html: html || '<b>Hello world </b>'
        };

        const sendRes = await transporter.sendMail(mailOptions);
        console.log("邮件发送成功: " + sendRes.response);
        res.send({ code: 200, msg: '发送成功', data: sendRes.response });
    } catch (error) {
        console.log("邮件发送失败: ", error);
        res.status(500).send({ code: 500, msg: '邮件发送失败', error: error.message });
    }
});

module.exports = router;

2. 在服务端入口文件（通常为app.js/server.js）挂载路由：

const express = require('express');
const app = express();
// 必须加该中间件才能解析POST请求的JSON参数
app.use(express.json());

// 挂载邮件路由，接口前缀为/api/mail
const mailRouter = require('./routes/mail');
app.use('/api/mail', mailRouter);

// 启动服务，端口自行修改
app.listen(3000, () => {
    console.log('服务端已启动在3000端口');
});

2. 配置开发环境代理解决跨域 #

如果是vue-cli搭建的Vue项目，在根目录vue.config.js中添加代理配置，避免前端直接请求服务端出现跨域问题：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000', // 替换为你的服务端实际运行地址
        changeOrigin: true
      }
    }
  }
}

修改配置后必须重启Vue开发服务才能生效。生产环境直接通过Nginx将/api路径的请求反向代理到Node服务即可。

3. 改造前端代码调用接口 #

先安装前端请求库axios：执行命令npm install axios

方式一：组件内直接发请求（逻辑简单推荐使用） #

直接修改你的Vue组件代码：

<script>
import axios from 'axios';
export default {
 name: "PlantsList",
components: { },
methods: {
 cancelMail(data) {
  // 原取消逻辑保留
 },
 async makeMail(data){
  try {
    // 从localStorage读取预存的收件人地址
    const mailReceiver = localStorage.getItem('plMail');
    // 调用服务端发信接口
    const res = await axios.post('/api/mail/send-mail', {
      to: mailReceiver,
      subject: '你的邮件主题', // 可根据传入的row数据自行拼接
      html: `<b>对应业务数据：</b><p>${JSON.stringify(data)}</p>` // 自行组装邮件内容
    });
    if (res.data.code === 200) {
      alert('邮件发送成功');
    } else {
      alert(`发送失败：${res.data.msg}`);
    }
  } catch (err) {
    console.error('请求异常：', err);
    alert('邮件发送失败，请检查服务运行状态');
  }
 }
}
}
</script>

方式二：逻辑封装到Vuex（多模块复用场景使用） #

如果你需要在多个组件调用发信逻辑，可以把请求封装到Vuex的action中：

1. 编辑store/index.js文件：

import Vue from 'vue';
import Vuex from 'vuex';
import axios from 'axios';
Vue.use(Vuex);

export default new Vuex.Store({
  actions: {
    async makeMail(_, payload) {
      const mailReceiver = localStorage.getItem('plMail');
      const res = await axios.post('/api/mail/send-mail', {
        to: mailReceiver,
        subject: payload.subject,
        html: payload.html
      });
      return res.data;
    }
  }
})

2. 组件内原有dispatch调用逻辑保留，补充异步处理即可：

async makeMail(data){
  try {
    const res = await this.$store.dispatch('makeMail', {
      subject: '你的邮件主题',
      html: `<p>${JSON.stringify(data)}</p>`
    });
    if (res.code === 200) {
      alert('发送成功');
    }
  } catch (err) {
    alert('发送失败');
  }
}

注意事项 #

• nodemailer、node-schedule都是Node.js服务端依赖，必须安装在服务端项目的依赖中，不要装到前端项目里
• 邮箱账号、SMTP授权码等敏感配置必须全部放在服务端，绝对不能写到前端代码里
• 每次请求不需要重复创建transporter实例、也不需要手动调用close方法，全局复用实例即可

内容的提问来源于stack exchange，提问作者Luigi726