Question

我有这样的场景，我必须从外部file.say config.properties获取API URL，这不应该是构建的一部分。我正在使用webpack进行生产构建。主要目的是构建反应应用程序只需一次，我需要将结果构建部署到多个环境，比如示例20环境。

我尝试使用webpack DefinePlugin.But为我的情况，我能够使用这个因为使用这样我必须为每个环境构建。我正在寻找解决方案从环境中读取属性文件我将部署应用程序。是否有任何最佳解决方案。

new webpack.DefinePlugin({
    'process.env': {
      'NODE_ENV': JSON.stringify('process.env.PROD_123'),
      'API_URL': JSON.stringify(process.env.API_URL),
    }

Answer 1

在该代码段中，您将API_URL的出现次数替换为构建捆绑时process.env.API_URL的值。

为了使应用程序在运行时读取环境变量，只需删除API_URL的条目，因此将在运行时读取其值。请注意，这只适用于Node，因为浏览器没有环境变量。

new webpack.DefinePlugin({
  'process.env': {
    'NODE_ENV': JSON.stringify('process.env.PROD_123')
  }
})

如果您在浏览器中，可以在全局对象上设置一些值，并在您的包中选择它，如下所示：

new webpack.DefinePlugin({
  'process.env': {
    'NODE_ENV': JSON.stringify('process.env.PROD_123'),
    'API_URL': 'window.MY_APP.API_URL'
  }
})

无论其他文件包含API_URL的实际值，都应设置window.MY_APP = {API_URL}。

从外部文件获取API URL，该文件不属于React应用程序

1 个答案: