Question

我的react应用使用graphql从github获取用户数据，并且请求是通过.env文件上的个人访问令牌发出的。

我的.env文件位于项目的root文件夹中。密钥在左侧，密钥值（个人访问令牌）在右侧：

.env文件：REACT_APP_GITHUB_PERSONAL_ACCESS_TOKEN=xxxXXX

我的代码在App.js文件夹中component文件夹中的src文件中。 App.js-> ./src/components/App.js

的路径

在App.js内部，第6-10行有以下代码：

const axiosGitHubGraphQL = axios.create({
  baseURL: 'https://api.github.com/graphql',
  headers: {
    Authorization: `bearer ${process.env.REACT_APP_GITHUB_PERSONAL_ACCESS_TOKEN}`,
  },
});

通过此代码，我可以使用.env文件中的个人访问令牌向github请求，但该文件不起作用。

有人知道我的.env文件为什么不起作用吗？

我的react应用位于链接上的github：https://github.com/rvmelo/tech6-app

（注意：我在此链接上遵循了教程的第一步：https://www.robinwieruch.de/react-with-graphql-tutorial/）

Answer 1

这种自动加载.env的功能是react-scripts的东西。

在使用webpack-dev-server进行开发时，应手动加载。

您可以为此目的使用dotenv软件包。

const dotenv = require('dotenv').config({path: __dirname + '/.env'});

在webpack配置插件部分使用

new webpack.DefinePlugin({
  "process.env": dotenv.parsed
}),

查看更多：How to pass .env file variables to webpack config?

Answer 2

我目前正在使用同一教程https://www.robinwieruch.de/react-with-graphql-tutorial/，但遇到了同样的问题。

解决方案是先在GitHub上创建一个个人访问令牌，然后将其复制到您的.env文件中，该文件应位于根目录中。然后保存文件并重新启动应用程序。

取消并终止react app并重新启动一次npm。这使环境变量能够自动获取。我注意到环境变量必须重新启动才能运行

const axxiosGitHubGraphQL= axios.create({
  baseURL:"https://api.github.com/graphql",
  headers:{
    Authorization: `bearer ${
      process.env.REACT_APP_GITHUB_PERSONAL_ACCESS_TOKEN}`,
    }
  }
);

为什么带有个人访问令牌的env文件无法在我的React应用中运行？

2 个答案: