创建反应应用程序不拿起.env文件?

reactjs React.js

LPro

2020-03-19

我正在使用create react app引导我的应用程序。

我已经添加了两个.env文件.env.development,并.env.production在根。

我的.env.development包括:

API_URL=http://localhost:3000/api
CALLBACK_URL=http://localhost:3005/callback

当我使用react-scripts start运行我的应用程序时,process.env它会吐出来

{ NODE_ENV: "development", PUBLIC_URL: "" }

我尝试了不同的方法,但只是没有在开发文件中获取Veriable,我在做什么错?!

指令结构为:

/.env.development
/src/index.js

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",

编辑:

@jamcreencia正确地指出我的变量应该前缀REACT_APP

编辑2

如果我为文件命名,就可以了,.env但是如果我使用.env.development.end.production

第2315篇《创建反应应用程序不拿起.env文件?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

8个回答
小小蛋蛋 2020.03.19

在最新的react-scripts(3.2.0)中,说的很简单

PORT=4000
BROWSER=none

在您的.env或.env.development文件(..etc)中,该文件应该位于根文件夹中。

它不能与REACT_APP前缀一起使用(我认为文档已过时),并且不需要任何额外的npm包(反应脚本已经包含dotenv 6.2.0)

村村GO 2020.03.19

如果.env文件的工作,但.env.development还是.env.production没有,然后创建一个空.env文件旁边那两个。我不知道为什么,但这对我有用。

Harry理查德 2020.03.19

如果您想使用多种环境 .env.development .env.production

使用dotenv包

添加.env.development.env.production在项目根文件夹中

和你的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"   
},

然后根据像

npm run-script build-dev 
村村阿飞 2020.03.19

使用create-react-app,您需要REACT_APP_在变量名之前添加前缀才能访问它。

例:

REACT_APP_API_URL=http://localhost:3000/api
REACT_APP_CALLBACK_URL=http://localhost:3005/callback

在这里查看更多信息

小小飞云 2020.03.19

遇到同样的问题!解决方案是关闭与我的节点服务器的连接(可以使用CTRL + C进行此操作)。然后使用“ npm run start”重新启动服务器,.env应该可以正常工作。

资料来源:Github

小小小哥 2020.03.19

确保您的.env文件位于根目录中,而不是src文件夹中。

蛋蛋西里 2020.03.19

关于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"
  }

在您的package.json文件中。

YOC41811590 2020.03.19

为此,有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",
  }

在项目根目录中,您必须创建两个具有相同env变量但具有不同值的文件:

.env.development
.env.production

然后将其从公共场合排除。为此,请在.gitignore文件中添加两行:

.env.development
.env.production

因此,这是对dev和prod使用不同的env变量的正确方法。

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android