javascript - 在 React 应用程序中检查 HTML 文件中的生产和暂存环境

我正在尝试将第 3 方应用程序集成到我的 React 应用程序中。我必须使用不同的 keys 进行生产和登台,但我无法弄清楚如何在 React 和 Node 应用程序中实现这一点,我可以通过 process.env 做到这一点,但在 index.html 我无法弄清楚如何我能做到吗?

这是我的伪代码,我试图为我的 React 项目提取我的 index.html 文件

<script>
if(env === production){
  some_app.init('TOKEN_FOR_PRODUCTION');
}
else{
  some_app.init('TOKEN_FOR_STAGING_OR_DEV');
}
</script>

回答1

虽然我个人更喜欢 store 所有 API keys 在服务器本身上,但本指南表明还有其他方法可以做到这一点:

https://www.geeksforgeeks.org/how-to-hide-your-api-keys-from-public-in-reactjs/

此外,要单独在前端定义 prod 和 staging 之间的差异,我建议使用 webpack 定义插件变量:

https://webpack.js.org/plugins/define-plugin/

相似文章

最新文章