章节：环境变量

在 Create React App 中，你可以通过环境变量来配置你的应用程序。这些环境变量可以让你在不同环境中轻松地切换配置，例如在开发环境和生产环境中使用不同的 API 地址。

设置环境变量

你可以在项目根目录下创建一个名为 .env 的文件来定义环境变量。在这个文件中，你可以使用 REACT_APP_ 前缀来定义你的环境变量，例如：

REACT_APP_API_URL=https://api.example.com

在代码中，你可以通过 process.env.REACT_APP_API_URL 来访问这个环境变量。

环境变量的优先级

Create React App 在读取环境变量时有一定的优先级规则：

1. 在 .env 文件中定义的环境变量拥有最高优先级。
2. 如果有一个名为 .env.local 的文件，那么它将会覆盖掉 .env 文件中相同变量的值。
3. 然后是 .env.development 和 .env.production 文件，它们会根据当前的环境来选择性地加载。
4. 最后是内置的默认环境变量，例如 NODE_ENV。

使用不同环境变量

你可以在不同的环境中使用不同的环境变量。例如，在开发环境中，你可以使用一个本地的 API 地址，而在生产环境中，你可以使用一个远程的 API 地址。

在代码中，你可以根据 process.env.NODE_ENV 的值来判断当前的环境，然后使用不同的环境变量。例如：

const apiUrl = process.env.NODE_ENV === 'development' ? process.env.REACT_APP_API_URL_LOCAL : process.env.REACT_APP_API_URL_REMOTE;

总结

环境变量是一个非常有用的工具，可以帮助你在不同环境中配置你的应用程序。通过合理地使用环境变量，你可以轻松地在开发、测试和生产环境中切换配置，从而提高开发效率和应用程序的可维护性。