前端代码中访问NODE_ENV是否合理？React/Node项目如何动态配置服务器地址？

咱先理清楚核心问题：浏览器端根本跑不了Node.js，所以直接访问NODE_ENV肯定拿不到——这变量只存在于Node的运行环境里。下面给你几个实用的解决方案，适配不同的项目场景：

1. 脚手架自带的环境变量注入（最省心） #

如果你用的是Create React App（CRA）、Vite这类主流前端脚手架，它们都支持构建时注入环境变量，只是需要遵循特定的命名规则：

• 对于CRA：变量必须以REACT_APP_开头，比如REACT_APP_API_URL
• 对于Vite：变量必须以VITE_开头，比如VITE_API_URL

具体操作步骤：

• 在项目根目录创建两个文件：.env.development和.env.production
• 开发环境文件（.env.development）里写：

  REACT_APP_API_URL=http://localhost:3001
  

• 生产环境文件（.env.production）里写：

  REACT_APP_API_URL=https://your-heroku-app.herokuapp.com
  

• 然后在React组件里直接用：

  const apiUrl = process.env.REACT_APP_API_URL;
  // 后续请求就用这个apiUrl拼接接口路径
  

构建的时候，脚手架会自动把对应环境的变量注入到浏览器可访问的process.env对象里，完全不用操心环境判断。

2. 后端动态返回配置（适合自定义构建流程） #

如果你的项目没有用脚手架，或者需要更灵活的配置方式，可以让Node后端暴露一个配置接口，前端初始化时去拉取：

• 后端（Node/Express）加一个路由：

  app.get('/api/config', (req, res) => {
    const apiUrl = process.env.NODE_ENV === 'production' 
      ? 'https://your-heroku-app.herokuapp.com' 
      : 'http://localhost:3001';
    res.json({ apiUrl });
  });
  

• 前端React组件里用useEffect初始化时请求这个接口：

  import { useState, useEffect } from 'react';
  
  function MyComponent() {
    const [apiUrl, setApiUrl] = useState('');
  
    useEffect(() => {
      fetch('/api/config')
        .then(res => res.json())
        .then(data => setApiUrl(data.apiUrl))
        .catch(err => console.error('Failed to fetch config:', err));
    }, []);
  
    // 拿到apiUrl后再发起业务请求
    return <div>API Host: {apiUrl}</div>;
  }
  

这种方式的好处是配置完全由后端控制，哪怕后续换部署平台，前端代码不用改。

3. HTML模板注入（手动构建场景） #

如果是纯手动构建的项目，可以在HTML入口文件里注入全局变量：

• 在public/index.html里加一段脚本占位：

  <script>
    window.API_URL = '%API_URL_PLACEHOLDER%';
  </script>
  

• 然后在构建脚本（比如webpack配置或者shell脚本）里替换这个占位符：
  • 用webpack的话，配置DefinePlugin：

    const webpack = require('webpack');
    
    module.exports = {
      // 其他配置...
      plugins: [
        new webpack.DefinePlugin({
          'window.API_URL': JSON.stringify(
            process.env.NODE_ENV === 'production' 
              ? 'https://your-heroku-app.herokuapp.com' 
              : 'http://localhost:3001'
          )
        })
      ]
    };
    

  • 用shell脚本的话，构建时用sed替换：

    if [ "$NODE_ENV" = "production" ]; then
      sed -i 's/%API_URL_PLACEHOLDER%/https:\/\/your-heroku-app.herokuapp.com/g' public/index.html
    else
      sed -i 's/%API_URL_PLACEHOLDER%/http:\/\/localhost:3001/g' public/index.html
    fi
    

• 前端组件里直接用全局变量：

  const apiUrl = window.API_URL;
  

总结 #

优先推荐第一种方案（脚手架注入），因为最省心且符合社区规范；如果是自定义项目，第二种后端返回配置的方式更灵活，也方便后续维护；第三种适合纯手动构建的场景。

内容的提问来源于stack exchange，提问作者icey-t