create-react-app UI中的.env变量显示未定义

4

我正在尝试为我们的前端(不是 NodeJS)ReactJS应用程序设置构建特定的环境变量,该应用程序使用create-react-app进行初始化。

我在项目根目录下创建了三个文件:.env,.env.development,.env.production

出于测试目的,我已将这些变量放入每个.env文件中:

REACT_APP_TEST_KEY=1
TEST_KEY=1

在我的app.js文件中的render函数中,我添加了以下调试行:
  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

正如您所看到的,我试图在是否应该使用prepend REACT_APP这个问题上保留一些余地。

我花了几个小时阅读关于此主题的各种博客文章,以及SO上关于此主题的两个最流行的问题,但我仍然感觉没有答案,特别是因为一些回复会混淆它是否只能在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"
  }

1
环境变量必须以 REACT_APP_YOURENVNAME 开头。 - Pallamolla Sai
你的问题解决了吗? - Pallamolla Sai
2个回答

0

你似乎可能在文档中漏掉了一些要点,我已经尝试复制步骤以查看环境变量,在我的本地仓库和codesandbox仓库上都进行了测试。

它们都似乎记录了预期的环境变量。

请参见此codesandbox仓库获取更多详细信息。如果您在其他地方托管代码,请分享仓库详细信息。


0

感谢您的评论和建议。

结果证明这只是一些愚蠢的错误。我把我的.env文件放在了/src而不是项目根目录下 - 当你有超过50个文件的项目并且Visual Studio Code中文件夹查看器的缩进非常小的时候,这很容易发生。

一旦我将文件移动到顶级文件夹(在/src之上),一切都正常了。

(在此插入facepalm .gif)


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接