如何在Nuxt与VueJS项目中通过联系表单实现邮件发送功能

以下所有方案均适配nuxt generate构建的静态站点，可解决你遇到的端口冲突、模板引擎冲突、静态站不兼容问题：

方案1：修复现有EmailJs配置（成本最低） #

本地运行正常但部署失效90%以上是安全配置和环境变量问题，按以下步骤调整即可：

• 登录EmailJs后台，在「安全」设置中把你生产部署的域名添加到允许的域列表中，仅配置localhost会导致生产环境被拦截
• 把EmailJs相关的公钥、服务ID、模板ID配置到nuxt.config.ts的runtimeConfig.public字段下，确保静态打包后变量可以正常读取：

// nuxt.config.ts
export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      emailJsServiceId: '你的EmailJs服务ID',
      emailJsPublicKey: '你的EmailJs公钥',
      emailJsTemplateId: '你的EmailJs模板ID'
    }
  }
})

注意不要把EmailJs的私有密钥配置到公开变量中

方案2：无服务函数对接Nodemailer（灵活可控） #

不需要单独启动Nodemailer服务，依托Nuxt自带的服务端API能力（托管平台会自动处理为无服务函数），完全避免端口冲突和模板引擎冲突问题，服务端逻辑和前端代码完全隔离：

1. 安装依赖：npm install nodemailer
2. 在项目根目录新建server/api/sendMail.post.ts文件，编写服务端邮件发送逻辑：

// server/api/sendMail.post.ts
import nodemailer from 'nodemailer'

export default defineEventHandler(async (event) => {
  const { name, email, message } = await readBody(event)
  // 配置SMTP传输器
  const transporter = nodemailer.createTransport({
    host: '你的SMTP服务地址',
    port: 465,
    secure: true,
    auth: {
      user: process.env.SMTP_USER,
      pass: process.env.SMTP_PASS
    }
  })
  // 发送邮件
  await transporter.sendMail({
    from: '站点联系表单 <发件人邮箱>',
    to: '你的收件邮箱',
    subject: `新的表单提交来自${name}`,
    html: `<p>姓名：${name}</p><p>联系邮箱：${email}</p><p>留言内容：${message}</p>`
  })
  return { success: true }
})

3. 前端表单直接调用本地接口提交即可：

// 前端提交逻辑
async function submitForm() {
  await $fetch('/api/sendMail', {
    method: 'POST',
    body: {
      name: formData.name,
      email: formData.email,
      message: formData.message
    }
  })
}

注意：SMTP账号密码需要配置在托管平台的环境变量中，不要硬编码到代码里避免泄露
4. 正常执行nuxt generate构建即可，主流静态托管平台都支持自动识别Nuxt的服务端API路由，不需要额外配置端口。

方案3：第三方表单处理服务（零后端代码） #

不需要编写任何服务端逻辑，直接在前端表单中配置第三方表单服务的提交地址，原生表单提交或AJAX提交都可适配，无任何依赖冲突问题。

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