返回未定义的环境变量

我正在构建一个反应应用程序，我需要从我的 api 中获取数据，现在我想把 api 的 url 存储为一个环境变量。我有我的。Env 文件，我已经安装了 dotenv，这是我的代码 process.env.API _ URL 返回未定义的。

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Home from '../src/components/Home'
import dotenv from  'dotenv'
import path from 'path'




class App extends Component {
render() {
console.log(process.env.API_URL)
return (
<div>
<Home/>
</div>
);
}
}


export default App;
145489 次浏览
小开

您可能需要按照 文件的建议调用 dotenv.config()

如果使用 create-response-app，则不需要 dotenv软件包。您需要将 REACT_APP_前缀添加到 .env文件中的变量名。请看这里的文档

小开

有三件事要注意

  1. 变量应该是 前缀和 REACT_APP_

    例句: REACT_APP_WEBSITE_NAME=hello

  2. 您需要 重新开始服务器来反映这些变化。

  3. 确保你有。Env 文件放在 根文件夹(与 package.json 放在同一个位置) ，而不在 src 文件夹中。

之后，您可以访问这样的 process.env.REACT_APP_SOME_VARIABLE变量

附加提示

  1. 不需要用单引号或双引号包装变量值。
  2. 不要把分号 ;或逗号 ,放在每行的末尾。

阅读更多 给你(我自己的帖子)和官方 医生

小开

嘿，谢谢你，伙计，我所做的和工作是创建一个 config.js 文件

 const dev={
API_URL:"http://localhost:300"
}


const prod={
API_URL:"llll"
}
const config=process.env.NODE_ENV=='development'?dev:prod
export default  config

然后导入组件中的任何地方并获取数据。

小开

我掉进的另一个可能的陷阱是定义变量，它不在 create-response-app 文件夹下，而是在上面(Node server/backend 的位置)。Env 的位置)。确保你不会这样做，因为你会浪费宝贵的时间，就像我今天所做的。

小开

  • 确保在每个变量上都使用了前缀 REACT_APP

  • 确认. env 文件中的变量名与
    你的 js 文件。例如，REACT_APP_KEY在 process.env.REACT_APP_KY

  • 如果开发服务器正在运行，停止它，然后使用 npm 重新运行 我真的很纠结这个问题(变量是一个未定义的错误)。
  • 每次更新. env 文件时，都需要停止服务器并 重新运行它，因为环境变量只在构建期间更新 (变量是一个未定义的错误)。
  • 从变量值中删除引号。
// Wrong:
REACT_APP_KEY=”AHEHEHR”


// Right:
REACT_APP_KEY=AHEHEHR
小开

  • 在 REACT 环境变量上添加前缀 REACT _ APP _。

    apiKey: process.env.REACT_APP_API_KEY

  • Make sure .env file is in the root directory.

    src/
.env
.gitignore
package.json
package-lock.json

  • Restart the development server after making changes in .env file.

  • Copy only the value inside the quotation marks and don't forget to remove trailing commas(It haunted me for several hours). These examples will give you an error.

    REACT_APP_API_KEY=Ach2o1invVocSn25FcQhash209,
REACT_APP_API_KEY="Ach2o1invVocSn25FcQhash209",
REACT_APP_API_KEY="Ach2o1invVocSn25FcQhash209"
小开

如果上述解决方案不适合您，那么请检查您的“ . env”文件位置在哪里。 就像在我的情况下，我所做的一切都是正确的，但是错误的是我放置了。“ env”在我的项目目录之外，因此我得到了错误。

注意: 您的“ . env”文件应该位于“ package.json”所在的同一目录中。

小开

也通过清除缓存来尝试。

npx react-native start --reset-cache
小开
  1. 重新启动 vscode (关闭项目，关闭编辑器)
  2. 再打开
  3. 启动这个项目

在我的情况下，这很有帮助。还要记住以 REACT _ APP _ Your _ NAME _ KEY 开始密钥的名称

小开

解决办法:

在 Babel.config.js中，如果使用可选配置:

    {
"plugins": [
["module:react-native-dotenv", {
"moduleName": "@env",
"path": ".env",
"blacklist": null,
"whitelist": null,
"safe": false,
"allowUndefined": true
}]
]
}

你应输入:

import {API_URL, API_TOKEN} from "@env"

而不是:

import {API_URL, API_TOKEN} from "react-native-dotenv"

NPM 包描述本身具有这种不一致性

小开

不要在前端代码中存储或使用 API 键，因为它很容易通过开发工具读取

保存 API 密钥。Env 和在 React 应用程序中使用它们仍然是不安全的，因为 API 密钥可以从 DevTools 读取。

使用一些简单的后端代码作为服务的代理。

通过请求发送所需的数据，然后后端应该使用该数据，包括存储在后端的 API 密钥，然后向需要该 API 密钥的特定服务发出请求。

小开

不需要以 REACT_APP_作为前缀，只需识别您的环境-

  • 如果你使用的是开发环境(npm start) ，你应该在 .env.development中添加一个类似于-API_URL=http://example.com的环境变量
  • 如果你是在生产环境，更新 .env应该工作

然后在您的 JS 文件中使用与 process.env.API_URL相同的内容

注意: 我已经在 React JS v16.8上测试过了

小开

解决方案:
1. 删除双引号(“ ...”)。
2. 每个变量的前缀必须是 REACT _ APP。

正确的做法:

REACT_APP_API_URL=http://localhost:8002

我希望能成功。

小开

当从 JS文件调用 .env变量时 在编写 .env变量之前，您需要通过 process.env.前缀调用它

因此它看起来像 process.env.REACT_APP_NOT_SECRET_CODE

并且不要忘记以前面的答案中提到的 REACT_APP_前缀开始您的变量名，否则由于安全原因反应将忽略它。

小开

如果您正在本地主机上使用 dev server，请了解这一点。Env 不能在这里工作，你需要在“正常”服务器上部署网站，这是一个安全的理由，不允许浏览器看到。在舞台上

小开

在我的例子中，我首先将文件命名为 process.env。正如 医生明确指出的那样，文件应该简单地命名为 .env

小开

还要确保在输入 process.env.REACT _ APP _ YOURVARIABLE 时，IDE 不会添加到文件的顶部:

import process from "process";

这是我的问题，我收到 未定义，直到我删除意外添加的导入

小开

我研究了一些关于如何设置特定于环境的变量的选项，最后得出如下结论:

你可以直接使用 webpack 中的 dotenv-webpack(npm install dotenv-webpack-save)来访问任何环境变量。

你只需要在 webpack.config.js 文件中声明这个插件:

const path = require('path')
const Dotenv = require('dotenv-webpack')


module.exports = {
/*...*/
plugins: [
new Dotenv()
]
}

只要在根目录中创建 .env文件并在那里设置变量,

REACT_APP_API_URL=https://localhost:8080/api
REACT_APP_LOG_PATH=/usr/share/

然后在 js 文件中调用它，方法如下:

process.env.REACT_APP_API_URL
process.env.REACT_APP_LOG_PATH

提交答案