Create React App 添加自定义环境变量

章节:环境变量

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

设置环境变量

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

-----------------------------------------

在代码中,你可以通过 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 的值来判断当前的环境,然后使用不同的环境变量。例如:

----- ------ - -------------------- --- ------------- - ----------------------------------- - -------------------------------------

总结

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


上一篇:添加 Router(路由)
下一篇:制作渐进式 Web 应用程序(PWA)