如何在React项目中利用环境变量实现功能？-PHP中文网问答

问答

如何在React项目中利用环境变量实现功能？

P粉268284930 2023-09-16 13:18:15 查看 1240

React

我正在尝试将我的API密钥保存为环境变量，但我不知道如何访问它... 我使用npm安装了dotenv，在根目录下创建了文件，并将密钥放在那里。我尝试在js文件中通过使用process.env.API_KEY来访问它，但它显示该变量未定义。

我尝试在我需要密钥的文件顶部放置require('dotenv').config()，但它给我一个错误...

ERROR in ./node_modules/dotenv/lib/main.js 2:13-28
Module not found: Error: Can't resolve 'path' in ...

我觉得我可能要么将它放在了错误的文件中，要么是我漏掉了某些东西

Your Answer

提交

1 个回答

作为总结：

要在您的React层中读取API_KEY变量，您需要在构建之前导出变量REACT_APP_API_KEY，然后在任何React部分中，您可以通过以下方式获取值：

process.env.REACT_APP_API_KEY

查看链接以了解为什么需要前缀REACT_APP_。

此外，如果您的令牌是长期有效或不可过期的令牌，则不应将其暴露给前端（React）。只有可过期的令牌（授权码oauth2授权）应该暴露给前端层。

查看参考资料以了解如何处理前端变量

参考资料

2023-09-17 10:55:30

提交

Hot Questions

function_exists()无法判定自定义函数

2024-04-29 11:01:01

google 浏览器手机版显示的怎么实现

2024-04-23 00:22:19

子窗口操作父窗口，输出没反应

2024-04-19 15:37:47

父窗口没有输出

2024-04-18 23:52:34

关于CSS思维导图的课件在哪？

2024-04-16 10:10:18

显示更多

Hot Tools

vc9-vc14（32+64位）运行库合集（链接在下方）

phpStudy安装所需运行库集合下载

VC9 32位

VC9 32位 phpstudy集成安装环境运行库

php程序员工具箱完整版

程序员工具箱 v1.0 php集成环境

VC11 32位

VC11 32位 phpstudy集成安装环境运行库

SublimeText3汉化版

中文版，非常好用