如何让React+Node全栈应用共用根目录下的单个.env文件？

一、实现步骤 #

1. Node 后端配置 #

Node 默认加载当前工作目录下的 .env 文件，要读取根目录的文件，需手动指定路径：

• 确保 Node 项目已安装 dotenv 包（未安装则执行 npm install dotenv）
• 在服务器入口文件（比如 server/index.js）中添加如下代码：

  const path = require('path');
  require('dotenv').config({
    path: path.resolve(__dirname, '../.env') // 指向根目录的.env文件
  });
  
  // 之后可通过 process.env 读取变量
  const serverPort = process.env.SERVER_PORT;
  

  若 Node 项目使用 ES Modules（import 语法），则这样写：

  import path from 'path';
  import { fileURLToPath } from 'url';
  import dotenv from 'dotenv';
  
  const __filename = fileURLToPath(import.meta.url);
  const __dirname = path.dirname(__filename);
  
  dotenv.config({
    path: path.resolve(__dirname, '../.env')
  });
  

2. Vite 前端配置 #

Vite 默认读取 client/ 目录下的 .env 文件，要让它读取根目录的文件，只需在 client/vite.config.js 中配置 envDir：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  envDir: '../' // 指定.env文件所在目录为根目录
});

注意：Vite 仅暴露以 VITE_ 为前缀的环境变量给前端，所以根目录 .env 中前端要用的变量必须加前缀，示例：

# 后端专属变量（无需前缀）
SERVER_PORT=3001
# 前端专属变量（必须加VITE_前缀）
VITE_CLIENT_PORT=5173
VITE_BASE_URL=http://localhost

之后在 React 代码中可通过 import.meta.env.VITE_CLIENT_PORT 读取这些变量。

二、是否属于良好实践？ #

这种做法可行且合理，但要结合场景注意细节：

优点 #

• 统一管理配置：避免在 client/ 和 server/ 维护两份重复的.env文件，减少配置不一致的风险
• 简化环境切换：区分开发/生产环境时（比如 .env.development、.env.production），只需在根目录维护一套文件，前后端可根据运行模式自动加载对应配置（Vite 会根据 mode 自动匹配，Node 可通过 process.env.NODE_ENV 指定加载文件）

注意事项 #

• 敏感变量隔离：不要将后端敏感变量（如数据库密码、API密钥）和前端变量混放，即便 Vite 不会暴露无前缀的变量，也要防止敏感信息误提交或泄露
• 版本控制：务必将根目录的 .env 及所有 .env.* 文件添加到 .gitignore，避免敏感信息被提交到代码仓库
• 配置臃肿问题：如果前后端需要大量专属变量，共用.env可能让配置文件变得杂乱，这时可考虑保留部分端专属的.env文件，和根目录共用文件配合使用

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