React JS：使用环境变量根据生产与开发指定两个API URL

Question

我使用create-react-app作为我的React应用程序的样板。

我正在使用fetch向我的本地服务器发出请求

fetch("http://localhost:3000/users")
 .then(function(res){
  return res.json()
})
.then(function(res){
  return res.data
})

最终，当我部署到heroku时，我不会使用http：// localhost，而是使用https://safe-escarpment-99271.herokuapp.com/ 。

有没有办法将API网址存储在环境变量中

即。 fetch(API_URL)

因此我可以在Github上部署时使用它，但仍在本地测试，而不必来回更改URL。

我知道了

new webpack.DefinePlugin({
  'process.env':{
     'NODE_ENV': JSON.stringify('production'),
     'API_URL': JSON.stringify('http://localhost:8080/bands')
   }
}),

在许多答案，但这似乎并没有为我工作。 当我在console.log(process.env) ，唯一显示的是NODE_ENV和PUBLIC_URL

Answer 1

也许这对你有用：

const url = (process.env.NODE_ENV === 'development') 
    ? 'http://localhost:8080/bands/'
    : 'https://<your-app>.herokuapp.com/bands/';

在heroku默认NODE_ENV =生产： https ：//devcenter.heroku.com/changelog-items/688

Answer 2

尝试使用EnvironmentPlugin ：

new webpack.EnvironmentPlugin([
    "NODE_ENV",
    "API_URL"
])

Answer 3

您必须在REACT_APP_每个新环境变量的REACT_APP_ 。 在您的情况下，它将是REACT_APP_API_URL 。

其背后的原因是create-react-app忽略了所有自定义环境变量，如果它们不以REACT_APP_ （ NODE_ENV和PUBLIC_URL是例外）。