Vite React项目集成MailerSend生产环境报错：process is not defined

问题原因 #

MailerSend的代码（或其依赖）在浏览器环境中直接引用了Node.js的process全局对象，但Vite生产构建时不会默认注入该对象。现有配置仅定义了process.env，未处理顶层的process变量，导致代码执行时抛出未定义错误。

解决方案 #

方案1：修改Vite的define配置，补全process对象 #

直接在define中定义完整的process对象，确保代码能访问到它：

export default ({ mode }) => {
  const env = loadEnv(mode, process.cwd(), "");
  return defineConfig({
    plugins: [react()],
    define: {
      // 将process定义为包含env的对象，避免顶层process未定义
      process: JSON.stringify({ env }),
    },
    server: {
      host: "localhost",
      hmr: {
        clientPort: 5173
      },
    },
  });
};

方案2：使用Node.js polyfill插件 #

安装vite-plugin-node-polyfills来补全浏览器缺失的Node.js全局对象：

1. 安装依赖

npm install vite-plugin-node-polyfills --save-dev

2. 修改vite.config.js

import { nodePolyfills } from 'vite-plugin-node-polyfills';

export default ({ mode }) => {
  const env = loadEnv(mode, process.cwd(), "");
  return defineConfig({
    plugins: [
      react(),
      nodePolyfills({
        include: ['process'], // 仅注入process相关的polyfill
      })
    ],
    define: {
      "process.env": env,
    },
    server: {
      host: "localhost",
      hmr: {
        clientPort: 5173
      },
    },
  });
};

方案3：后端处理邮件发送（推荐） #

注意：直接在前端使用MailerSend会将你的API密钥暴露给所有用户，存在严重安全风险。更合理的做法是：

• 搭建一个简单的Node.js后端接口（比如用Express）
• 在后端集成MailerSend处理邮件发送逻辑
• 前端仅发送请求到你的后端接口，传递邮件所需参数

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