Node.js 如何将配置变量从服务器（Express）传递到React应用程序

我正在构建React+Express应用程序，我需要将一些配置变量从服务器配置传递到React应用程序（例如API URL）

我需要在开发（2台服务器-Webpack Dev server+Node.js）和生产（只有带有内置前端的Node.js Express服务器）中这样做

如何做到这一点

---

我尝试将本地人从Express传递到我的模板，我在那里执行了

window.config='

（EJS模板系统），然后在React应用程序中使用

window.config

。我认为这不是正确的方法。

React是客户端，没有人会建议您将服务器配置变量（如api键）传递到客户端，但如果您想将配置变量传递到客户端

你可以按要求去做

// import config variable to express app.js server side
const config = require('./config.js');

// send the config variable
app.get('/getconfig', (req, res) => {
  res.json(config);
});

在客户端，向actions creator文件中的/getconfig发出axios get请求

export function getConfig() {
   const req = axios.get('/getconfig')
            .then(res=> res.data)
            .catch(err => console.log(err));
   return {
        type: "GETCONFIG",
        payload: req
   }
}

现在你可以把它添加到还原器交换盒中，然后在任何反应组件中使用它。

你可以考虑在WebPACK中使用。此功能允许您创建前端逻辑中使用的全局常量。由于它是在编译时创建的，所以您可以从节点层检索配置

例如，您有两个GTM容器，一个用于开发，另一个用于生产。在生产网页包配置中，我们可以使用以下内容：

const config = require('./node/config/prod.js');

module.exports = {
  // skip other setting...

  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV' : JSON.stringify('production'),
      'process.env.GTM_ID' : JSON.stringify(config.gtm.id)
    });
  ]
};

---

然后在html中，您可以使用

process.env.GTM_ID

在不同的环境中动态地获取GTM ID。

它不是超级相关的，需要注意的是，未屏蔽的全局变量几乎总是不好的。我倾向于在应用程序挂载时通过API调用完成这类工作，并将其保持在Redux状态，并将需要该信息的组件连接到配置片。如果您在安装组件之前需要这些值，那么这样做很好。API不是一个好主意，因为它很容易失败。。。如果API失败，那么你的应用程序无论如何都会失败（这就是为什么你在应用程序中有默认值）。你问了，我回答了，不知怎么的，我的应用程序一直在工作。我把它作为一个答案：）我只是希望有更好的一个你可以渲染它（就像你现在做的那样）或者从API获得它——还有什么其他选项？！