reactjs 创建 react 应用程序没有选择 .env 文件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48378337/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
create react app not picking up .env files?
提问by shenku
I am using create react appto bootstrap my app.
我正在使用create react app来引导我的应用程序。
I have added two .envfiles .env.developmentand .env.productionin the root.
我已经添加了两个.env文件.env.development，并.env.production在根。
My .env.developmentincludes:
我的.env.development包括：
API_URL=http://localhost:3000/api
CALLBACK_URL=http://localhost:3005/callback
When I run my app using react-scripts startand console out process.envit spits out
当我使用react-scripts start并控制台运行我的应用程序时，process.env它会吐出来
{ NODE_ENV: "development", PUBLIC_URL: "" }
I've tried different things, but its just not picking up the veriables in my development file, what am I doing wrong?!
我尝试了不同的东西，但它只是没有在我的开发文件中找到真实的东西，我做错了什么？！
Directry structure is:
目录结构为：
/.env.development
/src/index.js
Package.json script is:
Package.json 脚本是：
"start": "export PORT=3005; npm-run-all --parallel server:start client:start",
"client:start": "export PORT=3005; react-scripts start",
"server:start": "node server.js",
"build": "react-scripts build",
Edit:
编辑：
@jamcreencia correctly pointed out my variables should be prefixedwith REACT_APP.
@jamcreencia正确地指出我的变量应该前缀用REACT_APP。
Edit 2
编辑 2
It works okay if I name the file .envbut not if I use .env.developmentor .end.production
如果我命名文件，它可以正常工作，.env但如果我使用.env.development或.end.production
回答by jamcreencia
With create-react-app, you need to prefix REACT_APP_to the variable name to be able to access it.
使用create-react-app，您需要REACT_APP_在变量名前加上前缀才能访问它。
Example:
例子：
REACT_APP_API_URL=http://localhost:3000/api
REACT_APP_CALLBACK_URL=http://localhost:3005/callback
回答by Ryan Dhungel
Make sure your .env file is in the root directory, not inside src folder.
确保您的 .env 文件在根目录中，而不是在 src 文件夹中。
回答by Maria Jeysingh Anbu
If you want to use multiple environment like .env.development.env.production
如果你想使用多个环境，比如 .env.development.env.production
use dotenv package
使用dotenv 包
add .env.developmentand .env.productionin project root folder
在项目根文件夹中添加.env.development和 .env.production
and your package.json
和你的 package.json
"scripts": {
"start": "react-app-rewired start",
"build-dev": "dotenv -e .env.development react-app-rewired build",
"build-prod": "dotenv -e .env.production react-app-rewired build",
"build": "react-app-rewired build",
"test": "react-app-rewired test --env=jsdom",
"eject": "react-scripts eject"
},
then build according to environment like
然后根据环境构建
npm run-script build-dev
回答by Joe
Had this same problem! The solution was to close the connection to my node server (you can do this with CTRL + C). Then re-start your server with 'npm run start' and .env should work properly.
有同样的问题！解决方案是关闭与我的节点服务器的连接（您可以使用 CTRL + C 执行此操作）。然后使用“npm run start”重新启动您的服务器，.env 应该可以正常工作。
Source: Github
来源：Github
回答by tim
Regarding env-cmd. As per VMois's kind post on gitHub, env-cmdhas been updated ( version 9.0.1 as of writing ), environment variables will work as follows on your Reactproject:
关于env-cmd。根据 VMois在 gitHub 上的友好帖子，env-cmd已更新（截至撰写时为 9.0.1 版），环境变量将在您的React项目中按如下方式工作：
"scripts": {
"build:local": "env-cmd -f ./.env.production.local npm run build",
"build:production": "env-cmd -f ./.env.production npm run build"
}
In your package.jsonfile.
在您的package.json文件中。
回答by Nastro
For this purpose there is env-cmdmodule. Install via npm npm i env-cmdthen in your package.jsonfile in scriptssection:
为此，有env-cmd模块。通过 npm 安装，npm i env-cmd然后在您的package.json文件scripts部分安装：
"scripts": {
"start": "env-cmd .env.development react-scripts start",
"build": "GENERATE_SOURCEMAP=false env-cmd .env.production react-scripts build",
}
In your project root you have to create two files with the same env variables but with different values:
在您的项目根目录中，您必须创建两个具有相同 env 变量但具有不同值的文件：
.env.development
.env.production
Then exclude them from public. For this in your .gitignorefile add two lines:
然后将他们排除在公众之外。为此，在您的.gitignore文件中添加两行：
.env.development
.env.production
So this is a proper way to use different env variables for dev and prod.
所以这是为 dev 和 prod 使用不同 env 变量的正确方法。
回答by Stjepan Golemac
If the .envfile works but .env.developmentor .env.productiondon't, then create an empty .envfile alongside those two. I don't know why but this works for me.
如果.env文件有效但.env.development或.env.production无效，则.env在这两个文件旁边创建一个空文件。我不知道为什么，但这对我有用。
回答by cchapman
I was having the same problem, but it was because I had my .envfile in YAML format instead of JS.
我遇到了同样的问题，但这是因为我的.env文件是 YAML 格式而不是 JS。
It was
它是
REACT_APP_API_PATH: 'https://my.api.path'
but it needed to be
但它必须是
REACT_APP_API_PATH = 'https://my.api.path'
回答by Christos Tatitzikidis
As of latest react-scripts (3.2.0) it's a simple as putting say
从最新的 react-scripts (3.2.0) 开始，这很简单
PORT=4000
BROWSER=none
in your .env or .env.development file (..etc) which is supposed to be in the root folder.
在应该位于根文件夹中的 .env 或 .env.development 文件（..etc）中。
It will NOT work with then REACT_APP prefix (the docs are outdated I guess) and it does NOT require any extra npm packages (react-scripts already includes dotenv 6.2.0)
它不适用于 REACT_APP 前缀（我猜文档已经过时）并且它不需要任何额外的 npm 包（react-scripts 已经包含 dotenv 6.2.0）
