.env 变量在 create-react-app 中显示为未定义 UI
.env variables showing as undefined in create-react-app UI
我正在尝试设置特定于构建的环境变量以用于我们的前端(不是 NodeJS)使用 create-react- 初始化的 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.
我花了几个小时查看关于这个主题的各种博客文章,以及 SO 上关于这个主题的两个最受欢迎的问题,但我仍然觉得我没有答案,尤其是一些响应混淆它是否只在节点而不在浏览器中工作,并且 create-react-app
documentation有些相同的还没有更新。
该文档,顺便说一句,清楚地暗示这应该 运行 开箱即用,无需对 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"
}
按照文档,您似乎可能遗漏了一些要点,我已经尝试在我的本地存储库和 codesandbox 存储库上复制这些步骤来查看环境变量。
它们似乎都在记录预期的环境变量。
有关详细信息,请参阅 this codesandbox 存储库。如果您将代码托管在其他地方,请分享回购详细信息。
感谢您的意见和建议。
好吧,事实证明这很愚蠢。我将我的 .env 文件放在 /src 而不是项目根目录 - 当项目中有超过 50 个文件并且文件夹查看器上的缩进位于 Visual Studio 代码这么小
一旦我将文件移动到顶级文件夹(/src 之上),一切正常。
(在此处插入 facepalm.gif)
我正在尝试设置特定于构建的环境变量以用于我们的前端(不是 NodeJS)使用 create-react- 初始化的 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.
我花了几个小时查看关于这个主题的各种博客文章,以及 SO 上关于这个主题的两个最受欢迎的问题,但我仍然觉得我没有答案,尤其是一些响应混淆它是否只在节点而不在浏览器中工作,并且 create-react-app documentation有些相同的还没有更新。
该文档,顺便说一句,清楚地暗示这应该 运行 开箱即用,无需对 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"
}
按照文档,您似乎可能遗漏了一些要点,我已经尝试在我的本地存储库和 codesandbox 存储库上复制这些步骤来查看环境变量。
它们似乎都在记录预期的环境变量。
有关详细信息,请参阅 this codesandbox 存储库。如果您将代码托管在其他地方,请分享回购详细信息。
感谢您的意见和建议。
好吧,事实证明这很愚蠢。我将我的 .env 文件放在 /src 而不是项目根目录 - 当项目中有超过 50 个文件并且文件夹查看器上的缩进位于 Visual Studio 代码这么小
一旦我将文件移动到顶级文件夹(/src 之上),一切正常。
(在此处插入 facepalm.gif)