如何将单个 .env 文件用于全栈 React + Node 应用程序？

Question

我正在使用React和Node构建我的第一个全栈应用程序。该项目有一个根目录，其中有一个客户端文件夹（用于React子项目）和一个服务器文件夹（用于Node子项目）。我最近将React项目从create-react-app迁移到了Vite。我希望前端和后端都能够从整个项目根目录中的单个.env文件读取服务器端口、客户端端口和基本URL（现在是localhost），以避免对这些进行硬编码值。客户端和

P粉203648742 · Answer

我找到了一个混乱的解决方案，也许有人可以建议一些更干净的解决方案。

为了在 vite.config 文件中动态设置端口，我编写了以下代码：

import { defineConfig, loadEnv } from "vite";
import react from "@vitejs/plugin-react";
import path from "path";

export default ({ mode }) => {
  process.env = { ...process.env, ...loadEnv(mode, path.resolve(__dirname, "../")) };
  return defineConfig({
    plugins: [react()],
    envDir: "../",
    server: {
      port: process.env.VITE_CLIENT_PORT,
    }
  })
}

我还在文件中添加了 envDir 属性（如上所示），以将 Vite/React 配置为从根目录而不是客户端目录读取环境变量。
现在，在我的 React 项目中，我可以使用环境变量，如下所示：import.meta.env.VITE_SERVER_PORT
要在我的 Node 项目中使用 env 变量，我可以像这样使用 dotenv （同时还配置 .env 路径）：

const express = require('express');
require('dotenv').config({ path: '../.env' });
const app = express();

app.listen(process.env.VITE_SERVER_PORT, () => {
    console.log(`Server running on port ${process.env.VITE_SERVER_PORT}`);
})