为什么我的带有个人访问令牌的环境文件在我的react应用程序中不起作用？

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}`,
  },
});

通过这段代码，我可以使用我的个人访问令牌向github发出请求，该令牌位于.env文件中，但该文件无法工作。

有谁知道为什么我的.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应用程序npm start it again.this启用自动拾取环境变量我注意到必须重新启动环境变量才能正常工作

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