从Heroku和Webpack配置VAR

Question

new webpack.DefinePlugin({
'process.env': {
'     api1': JSON.stringify(process.env.api1),
     'api2': JSON.stringify(process.env.api2),
  }
})

但这并不奏效。有什么想法，我如何使用配置变量从heroku在我的react前端，我需要什么？

Answer 1

当您的主机服务构建应用程序时，您可以生成一个文件并将其存储为config。因此您可以在构建过程中访问环境VAR，因此您可以利用这一点，存储您所需的VAR，并且它们将保留在包中，供您将来访问（在客户端）。

例如，应用程序上的文件调用apis-configs.js

const whatYouWant = ['api1','api2'];

export default ()=>{
 return Object.keys(proccess.env)
              .filter(key => whatYouWant.includes(key))
              .reduce((config,key)=>{
                 if(!config[key]) config[key] = proccess.env[key]
                 return config
               },{})
}

所以这是一个普通的配置文件，但是我们不是导出硬编码的值，而是从环境中导出计算出来的值。（在构建运行时）