Vue项目使用Nodemailer报错：Class extends value undefined

你这个报错的核心原因是Nodemailer是Node.js后端专属库，不能在浏览器环境（Vue前端）里直接使用。它依赖Node.js的核心模块（如net、tls），这些模块在浏览器中不存在，直接引入就会触发类继承失败的错误。

正确的做法是把邮件发送逻辑放到后端，前端只负责收集表单数据并传给后端接口。

具体实现步骤 #

1. 搭建后端接口（用Express举例）

首先安装后端依赖：

npm install express cors nodemailer dotenv

创建server.js文件：

const express = require('express');
const cors = require('cors');
const nodemailer = require('nodemailer');
require('dotenv').config();

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

// 初始化邮件发送器
const transporter = nodemailer.createTransport({
  host: 'smtppro.zoho.com',
  port: 465,
  secure: true,
  auth: {
    user: process.env.EMAIL_USER, // 从环境变量取账号
    pass: process.env.EMAIL_PASS, // 从环境变量取密码/授权码
  },
});

// 邮件发送接口
app.post('/send-email', async (req, res) => {
  const { name, email, staff, subject, message } = req.body;
  const date = new Date(Date.now());

  try {
    await transporter.sendMail({
      from: `"${name}" <${email}>`,
      to: staff,
      subject: `Contact Page Submission: ${subject}`,
      html: `
        <h1>New Contact Form Submission</h1>
        <span><b>From:</b> ${name} - ${email}</span><br>
        <span><b>Subject:</b> ${subject}</span><br>
        <span><b>To:</b> ${staff}</span><br>
        <span><b>Sent At:</b> ${date.toUTCString()}</span><br><br>
        <span><b>Message:</b></span>
        <p>${message}</p>
      `,
    });
    res.status(200).json({ success: true, message: '邮件发送成功' });
  } catch (error) {
    console.error(error);
    res.status(500).json({ success: false, message: '邮件发送失败' });
  }
});

const PORT = process.env.PORT || 3001;
app.listen(PORT, () => {
  console.log(`服务运行在端口 ${PORT}`);
});

创建.env文件存储敏感信息（不要提交到代码仓库）：

EMAIL_USER=你的邮箱账号
EMAIL_PASS=你的邮箱密码/授权码
PORT=3001

2. 前端Vue组件修改

安装axios用于发送请求：

npm install axios

组件代码示例：

<template>
  <form @submit.prevent="sendContactEmail">
    <input v-model="formData.name" placeholder="你的姓名" required>
    <input v-model="formData.email" type="email" placeholder="你的邮箱" required>
    <input v-model="formData.staff" placeholder="收件人邮箱" required>
    <input v-model="formData.subject" placeholder="邮件主题" required>
    <textarea v-model="formData.message" placeholder="留言内容" required></textarea>
    <button type="submit">发送</button>
  </form>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      formData: {
        name: '',
        email: '',
        staff: '',
        subject: '',
        message: ''
      }
    };
  },
  methods: {
    async sendContactEmail() {
      try {
        const res = await axios.post('http://localhost:3001/send-email', this.formData);
        alert(res.data.message);
        // 重置表单
        this.formData = { name: '', email: '', staff: '', subject: '', message: '' };
      } catch (err) {
        alert('发送失败，请稍后重试');
        console.error(err);
      }
    }
  }
};
</script>

注意事项

• 不要把邮箱密码硬编码到代码里，必须用环境变量存储
• 部分邮箱需要开启SMTP服务，并且使用授权码代替登录密码（比如QQ邮箱、网易邮箱）
• 线上部署时，要配置后端的CORS规则，或者用Vue的代理解决跨域问题

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