为什么我的环境变量在react中不起作用

Question

我想隐藏我的api密钥，所以我在react根目录中创建了.evn.local文件，并使用process.env.api_key，但它在链接中发送未定义的，而不是实际的api密钥

async componentDidMount() {
const link = `https://newsapi.org/v2/top-headlines?category=${this.props.category}&pagesize=${this.props.pagesize}&country=${this.props.country}&page=${this.state.page}&apiKey=${process.env.API_KEY}`;
const data = await fetch(link);
this.setState({ loader: true });
const final_data = await data.json();
console.log(final_data);

.env.local文件

API_KEY = apikey

Answer 1

我认为您的应用程序是通过使用create-react应用程序创建的。

如果是，则会注意到环境变量应以REACT_APP_前缀命名。

您的项目可以使用在环境中声明的变量，就好像它们是在JS文件中本地声明的一样。默认情况下，将为您定义NODE_ENV，以及以REACT_APP_开头的任何其他环境变量。

注意：必须创建以REACT_APP_开头的自定义环境变量。除了NODE_ENV之外的任何其他变量都将被忽略，以避免意外暴露机器上可能具有相同名称的私钥。更改任何环境变量都需要重新启动正在运行的开发服务器。

有关更多详细信息，请阅读本页文档。

Answer 2

以REACT_APP_开头的环境变量。

警告：不要在您的React应用程序！

环境变量嵌入到构建中，这意味着任何人都可以通过检查应用程序的文件来查看它们。

Answer 3

在React项目中，您必须在根目录中.env*文件中保存的所有环境变量中使用REACT_APP_作为前缀才能使用它。您可以在此处阅读更多信息：https://create-react-app.dev/docs/adding-custom-environment-variables/#adding-env 中的开发环境变量