创建 React App：在 index.html 中使用环境变量

Question

有没有办法注入环境变量，例如REACT_APP_MY_API 到 index.html 文件？

根据 this，它可以完成，但我似乎无法让它工作。

.env

REACT_APP_MY_API=https://something.com

index.html

<script type="text/javascript">
  console.log("%REACT_APP_MY_API%") // undefined 
  console.log("%NODE_ENV%") // development
</script>

Answer 1

我刚刚尝试了（几乎）新的 CRA 设置并且它有效。

<head>
  <title>React App</title>
  <script type="text/javascript">
   console.log("%REACT_APP_TEST%") // OK
   console.log("%NODE_ENV%") // development
  </script>
</head>

您是否尝试重启服务器？我只是尝试用您的示例更改测试变量，如果您重新启动开发服务器，它就会起作用。

正如有人在评论中指出的那样，CRA 的官方文档对此有 a section。

Answer 2

我这样试过 'NODE_ENV=development npm start' 效果很好

Answer 3

确保在将变量添加到 .env 文件时重新启动 create-react-app

还要确保你有 >= react-scripts@0.9

我使用 .env 变量作为具有各种语言版本的网站的元标题：

<title>%REACT_APP_SITE_TITLE%</title>

Answer 4

来自文档 (here)：

确保您的 react-scripts 依赖版本等于或大于 0.0.9
在 package.json

.env

确保所有变量都以 REACT_APP_ 开头；例如 REACT_APP_TITLE
使用 process.env.REACT_APP_XXX
或者在你的 html 代码中用 % 包围它，即 <title>%REACT_APP_TITLE%</title>
重新启动您的开发服务器/在更改您的 .env 文件时重新编译您的应用程序

Answer 5

如果你想在脚本标签中使用环境变量，请将变量放在引号中：

<script src="https://maps.googleapis.com/maps/api/js?key=%REACT_APP_MAP_API%&v=3.exp&libraries=places" async
    ></script>

创建 React App：在 index.html 中使用环境变量

Create React App: using environment variables in index.html

reactjs

create-react-app

.env

index.html