全栈项目中Node、Webpack、React共享字符串变量的方案求助

核心问题拆解 #

你遇到的问题本质是三个运行环境的变量读取逻辑存在差异：

• server.js 和 Webpack 配置文件 options.js 运行在Node.js环境，可直接读取系统环境变量或通过dotenv加载本地.env文件
• home.tsx 运行在浏览器环境，无法直接访问Node.js的process.env，必须通过Webpack编译时注入变量

具体实现步骤 #

1. 让Webpack配置文件提前加载.env变量 #

由于Webpack配置加载时还未启动构建流程，必须在options.js最顶部手动加载dotenv，并指定.env文件的绝对路径（避免相对路径出错）：

// app/webpack/options.js 顶部添加
const dotenv = require('dotenv');
const path = require('path');

// 从项目根目录加载.env文件
dotenv.config({ path: path.resolve(__dirname, '../../.env') });

// 后续正常使用process.env.APP_API
module.exports = {
  // ...其他配置
  devServer: {
    publicPath: '/',
    open: true,
    https: false,
    port: localPort,
    proxy: {
      [`/${process.env.APP_API}`]: {
        target: `http://localhost:${apiPort}`,
        secure: false
      }
    },
  }
}

2. 为React代码注入环境变量 #

浏览器无法直接读取Node.js的process.env，需要用Webpack的DefinePlugin将变量注入到编译后的代码中：
在options.js的plugins数组中添加以下配置：

const webpack = require('webpack');

module.exports = {
  // ...其他配置
  plugins: [
    new webpack.DefinePlugin({
      // 注意：必须用JSON.stringify转成字符串格式，否则会被当作变量名解析
      'process.env.APP_API': JSON.stringify(process.env.APP_API)
    })
  ]
}

完成后，home.tsx里的process.env.APP_API会被替换为实际的字符串值，浏览器可正常识别。

3. 确保Node.js服务正确读取变量 #

server.js的现有写法基本可行，若出现路径识别问题，可改为手动指定.env路径：

// server.js 顶部（CommonJS写法）
require('dotenv').config({ path: path.resolve(__dirname, '.env') });

// 或ES模块写法
import dotenv from 'dotenv';
import path from 'path';
dotenv.config({ path: path.resolve('.env') });

额外注意事项 #

• 确保.env文件中的变量无拼写错误，格式为APP_API=api（不要添加引号）
• 若需区分开发/生产环境，可创建.env.development、.env.production文件，加载时通过NODE_ENV指定：

  dotenv.config({ 
    path: path.resolve(__dirname, `../../.env.${process.env.NODE_ENV || 'development'}`) 
  });
  

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