我正在尝试为我们的前端(不是 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"
}