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

有没有一种方法可以将环境变量，例如 REACT_APP_MY_API注入到 index.html文件中？

根据 这个，这是可以做到的，但我似乎不能让它工作。

。 env

REACT_APP_MY_API=https://something.com

Html

<script type="text/javascript">
console.log("%REACT_APP_MY_API%") // undefined
console.log("%NODE_ENV%") // development
</script>
44519 次浏览
小开
最佳答案

I just tried with an (almost) new CRA setup and it works.

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

Did you try restarting the server? I just tried changing the test variable with your example and it works if you restart the development server.

As someone pointed out in the comments, the official documentation of CRA has a section about that.

小开

I tried like this 'NODE_ENV=development npm start' and it works well

小开

Make sure you restart your create-react-app when adding variables into the .env file

Also make sure you have >= react-scripts@0.9

I use .env variables for the meta title of a site with various language versions of the build:

<title>%REACT_APP_SITE_TITLE%</title>

小开

From the docs (here):

  • make sure your react-scripts dependency version is equal or greater than 0.0.9
  • create a .env file at the same level of your package.json
  • make sure all you variables start with REACT_APP_; for example REACT_APP_TITLE
  • use them in you js / ts code using process.env.REACT_APP_XXX
  • or in you html code surrounding it with % ie <title>%REACT_APP_TITLE%</title>
  • restart your development server / re-compile your app when making changes to your .env file
小开

If you want environmental variable in script tag, put the variable in quote:

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

Solution in 2022

In create react app I have .env.production, .env.staging and .env.development.

In all .env files I have REACT_APP_FB_ID.

So in index.html I just use <meta name="fb:app_id" content="%REACT_APP_FB_ID%" />


提交答案