React，使用 create-react-app 的不同环境文件

Question

我正在尝试在 React 项目中设置不同的环境文件（使用 create-react-app）。我遵循官方文档，但收到错误：

“.env.development”不被识别为内部或外部命令，

我有

.env

、

.env.local

、

.env.development

、

.env.production

与

package.json

和

src/

处于同一级别

我的脚本在

package.json

:

"scripts": {
   "start": "react-scripts start",
   "build": "react-scripts build",
   "test": "react-scripts test",
   "eject": "react-scripts eject"
},

还尝试了其他选项：

"start": ".env.local, .env.development, .env"

。

当我运行

npm start

时，两者都会返回类似的错误。

我的所有键都以前缀开头：REACT_APP_。例如：

REACT_APP_API_KEY

.

我错过了什么？

Answer 1

以下是您可以使用的 env 文件及其优先级（适用于

[email protected]

及更高版本）：

.env

：默认。

.env.local

：本地覆盖。除测试之外的所有环境都会加载此文件。

.env.development

、

.env.test

、

.env.production

：特定于环境的设置。

.env.development.local

、

.env.test.local

、

.env.production.local

：本地覆盖特定于环境的设置。

这意味着

production

的环境变量会进入

.env.production

文件等。以下是要遵循的步骤：

1. 在项目的根目录中创建您的

   .env

   或

   .env.production

   文件...，与

   package.json

   所在的文件夹相同。

2. 您可以在这些 env 文件中使用前缀

   REACT_APP_

   定义环境变量，如下所示：

REACT_APP_API_KEY=343535345235452452

3. 您可以这样在代码中使用它们：

• 在 JavaScript 文件中：

process.env.REACT_APP_API_KEY

• 在 HTML 文件中：

<title>%REACT_APP_API_KEY%</title>

如果您想在

scripts

中设置环境变量，您可以这样做：

"scripts": {
    "start": "REACT_APP_API_KEY=343535345235452452 react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
},

Answer 2

我认为你必须使用 env-cmd 包才能使用多个环境。这是最好的处理方法。 只需按照此文档获取更多信息react 的多个 env 示例和env-Cmd 包详细信息

另外，请检查您在项目中使用的 react/react-scripts 版本，并检查您为演示创建的 react/react-scripts 版本是否适合您。

Answer 3

单独环境的最简单方法是使用 env-cmd。检查下面的链接以获得正确的指导， https://www.ultimateakash.com/blog-details/Ii0jJGAKYAo=/How-to-Create-Multiple-Environments-In-React-2023