javascript - react JS : Use environment variables to specify two API urls based on production vs development

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 url 存储在环境变量中

即。 获取(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=production: https://devcenter.heroku.com/changelog-items/688