React + Webpack:在哪里配置REST端点

Question

我有一个React + Flux应用程序并使用Webpack.我正在使用的REST API由不同的服务器提供服务,我试图找出我可以指定后端端点常量的位置,具体取决于我是在dev或prod环境中.

目前,对于dev,我已经将URL编码为localhost:port,但是当我部署时,它仍然尝试访问localhost上的端点.

它似乎应该是非常常见的东西,但找不到任何信息.

Answer 1

您可以将环境变量添加到webpack脚本中.节点的一个常见做法是在bash或package.json中使用webpack脚本时使用ENV = production || dev.接下来,您可以创建两个不同的配置文件,一个用于生产,一个用于开发.

plugins: [
    new webpack.DefinePlugin({
        ENV: process.ENV === 'dev' ? require('./dev-config-path')) : require('./prod-config-path')
    })
]

ENV现在应该附加到窗口对象.请确保不要添加API密钥或任何内容,因为它可以访问.你也可以硬编码api URL.

plugins: [
    new webpack.DefinePlugin({
        API: process.ENV === 'dev' ? 'localhost:3000' : 'xxx.xxx.x.x'
    })
]