reactjs - .env 变量在 create-react-app UI 中显示为未定义
问题描述
我正在尝试设置特定于构建的环境变量,以便在使用create-react-app初始化的前端(不是NodeJS)ReactJS 应用程序中使用。
我在项目根目录中创建了三个文件:.env、.env.development、.env.production
出于测试目的,我将这些变量放在每个 .env 文件中:
REACT_APP_TEST_KEY=1
TEST_KEY=1
在渲染函数的 app.js 文件中,我添加了以下调试行:
console.log(`.env test key: ${process.env.REACT_APP_TEST_KEY}`);
console.log(`.env test key: ${process.env.TEST_KEY}`);
全部保存后,我在命令行运行npm start。
结果如下:
.env test key: undefined
.env test key: undefined
如您所见,我试图对是否应该使用前置REACT_APP进行对冲。
我花了几个小时查看关于这个主题的各种博客文章,以及关于这个主题的两个最受欢迎的问题,但我仍然觉得我没有答案,特别是因为一些回复混淆了它是否ll 仅在 node 中而不在浏览器中工作,并且 create-react-app 文档有些相同尚未更新。
顺便说一句,该文档清楚地暗示这应该开箱即用,无需对 package.json 文件进行额外编辑。无论如何,我已将其包含在下面:
"name": "ui",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.5.0",
"@testing-library/user-event": "^7.2.1",
"msal": "^1.3.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-router-dom": "^5.1.2",
"react-scripts": "3.4.1",
"react-stl-obj-viewer": "^1.2.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all",
"ie 11"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version",
"ie 11"
]
},
"devDependencies": {
"node-sass": "^4.13.1"
}
解决方案
您似乎可能在文档之后遗漏了一些要点,我尝试在我的本地存储库和代码和框存储库上复制这些步骤以查看 env 变量。
他们俩似乎都在记录预期的环境变量。
有关更多详细信息,请参阅此代码和框repo。如果您将代码托管在其他地方,请分享 repo 详细信息。
推荐阅读
- javascript - 上传不起作用:带有上传图像的邮件表单到服务器
- matplotlib - 使用任意法线转换为 3d 的 matplotlib 2d 补丁的方向与 quiver 给出的方向不匹配
- javascript - 页面未聚焦时停止倒计时
- google-chrome-extension - 将 HTMLImageElement 传递给 tf.fromPixels() 函数
- python - 在 Python3 中使用单元测试进行单元测试
- node.js - 启动 mongodb 时出现 TransientTransactionError
- python-3.x - ElementNotVisibleException:消息:尝试单击 youtube 搜索中的顶部视频时出现元素不可交互错误
- node.js - 错误:/lib/x86_64-linux-gnu/libm.so.6:版本“GLIBC_2.27”
- electron - 在不同的端口上运行 Electron UI
- openstack - Openstack热模板:浮点数作为输入参数