将.env文件添加到React Project

  • Z时代
  • 2024-01-10
  • 分类：问答

我试图在提交到github时隐藏我的API密钥，并且我在论坛中浏览了相关指南

我进行了更改，然后重新开始了纱线。我不确定自己在做什么错–我.env在项目的根目录（我命名了它process.env）中添加了一个文件，并在我刚刚放入的文件中添加了一个文件REACT_APP_API_KEY

= 'my-secret-api-key'。

我想这可能是fetch在App.js中向我添加密钥的方式，并且我尝试了多种格式，包括不使用模板文字，但是我的项目仍然无法编译。

任何帮助深表感谢。

performSearch = (query = 'germany') => {
    fetch(`https://api.unsplash.com/search/photos?query=${query}&client_id=${REACT_APP_API_KEY}`)
    .then(response => response.json())
    .then(responseData => {
        this.setState({
            results: responseData.results,
            loading: false
        });
     })
     .catch(error => {
            console.log('Error fetching and parsing data', error);
     });
}

回答：

4个步骤

  1. npm install dotenv --save

  2. 接下来，将以下行添加到您的应用中。

require('dotenv').config()

  1. 然后.env在应用程序的根目录下创建一个文件，并将变量添加到其中。

    // contents of .env

    REACT_APP_API_KEY = ‘my-secret-api-key’

  2. 最后，添加.env到您的.gitignore文件中，以便Git忽略它，并且它永远不会在GitHub上结束。

如果您使用的是create-react-app，则只需执行第3步和第4步，但请记住，变量必须以REACT_APP_它开始起作用。

-

参考-https: //medium.com/@thejasonfile/using-dotenv-package-to-create-

environment-variables-33da4ac4ea8f

以上是 将.env文件添加到React Project 的全部内容， 来源链接： utcz.com/qa/426890.html

回到顶部