我遗漏了一些关于 .env 的内容，你能给我解释一下吗？

Question

我有一个非常基本的需求：根据环境为我的 API 存储不同的端点。假设一个简单的文件是这样的：

API_URL=http://localhost:8080

对于我的产品环境，它应该变成：

API_URL=http://myprodServer

我也想要一个集成测试和一个 uat 端点！

查看我的 package.json 我看到了：

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

所以我的想法是：

1. 在“build”和“start”附近放置一个命令行参数，以便指定本地和生产环境文件
2. 有一种方法可以访问我的应用中的上述配置，比如 config.API_URL

现在，我来自 Spring Boot，在 Spring Boot 中，每个环境都有一个文件。

虽然 dotenv 可能是我的解决方案，但我在他们的网站上看到了两件奇怪的事情：

1. 请不要提交您的 .env 文件 --> 那么，我的同事应该如何构建我的应用程序？我通常至少推送本地和测试环境，同时将 uat 和生产文件直接保存在服务器下
2. 你应该只有一个 .env 文件 --> 好吧，这个文件毁了我：如果我只有一个文件，我应该如何处理多个环境？？？

我在这里缺少什么？你能帮我解决我的问题吗？我是 npm 新手，所以我有点困惑......

Answer 1

您似乎正在使用 CRA 来开发您的 React 应用程序。如果是这样，你的环境变量应该是REACT_APP_API_URL=http://localhost:8080。注意前缀。如果您使用 CRA，则必须使用前缀。更多关于 here 的信息。如果您正确执行此操作，则该变量应该可以在您的 javascript 中使用 process.env.REACT_APP_API_URL。

在工作中，我们每个人在本地都有一个 .env 文件的副本，因为我们没有将其签入。每个环境都有不同的 .env 文件 - 例如 - .env.production、.env.development、 .env.stage。然后，我们在package.json 中为每个环境创建了一个运行和构建脚本。使用env-cmd 包，我们的脚本可能如下所示：

{
...
...
 "start": "react-scripts start",
 "start:stage": "env-cmd .env.stage.local react-scripts start",
 "start:production": "env-cmd .env.production.local react-scripts start",
 "build": "react-scripts build",
 "build:stage": "env-cmd .env.stage.local react-scripts build",
 "build:development": "env-cmd .env.development.local react-scripts build",
...
...
}

除此之外，我们还为每个环境创建了一个 git 分支，以便在 stage 分支上运行 npm run build:stage 并部署到 Stage 环境。我们会为生产做同样的事情。

在四处寻找多环境设置后，这就是我决定的，它工作正常。不过，我愿意改进这个过程。