create-react-app 环境变量

create-react-app 是一个用于生成 React 应用程序的官方脚手架工具。在使用 create-react-app 来创建 React 项目时，您可以使用不同的环境变量来控制应用程序的行为。

NODE_ENV

NODE_ENV 是一个环境变量，用于告诉应用程序当前的运行环境。在 create-react-app 中，默认情况下，NODE_ENV 的值为 "development"。但是在使用 npm start 启动应用程序时，此值将更改为 "production"。

• 在开发模式下，React 会使用开发版本的代码，并且可以进行一些诊断和警告。
• 在生产模式下，React 会使用生产版本的代码，并且会更加优化和压缩，以便于更快的加载速度。

.env 文件

您可以通过创建 .env 文件在应用程序中设置自定义的环境变量，这些变量将覆盖默认值。在 .env 文件中使用 REACT_APP_ 前缀来定义变量名。

例如，假设您希望设置一个名为 REACT_APP_API_URL 的自定义变量来存储您的 API 地址：

REACT_APP_API_URL=https://api.example.com

.env.local 文件

.env.local 文件类似于 .env 文件，如果它们在项目根目录中存在，它们将优先于 .env 文件。这对于在不同的部署环境中设置不同的环境变量非常有用。

例如，假设您有一个名为 .env.production 的文件和一个名为 .env.development 的文件。只要启动应用程序时，将环境变量中的 NODE_ENV 设置为对应的值，并且将 .env 文件重命名为 .env.${NODE_ENV}。这样就可以在不同的环境中指定不同的环境变量。

在应用程序中访问环境变量

使用 process.env 对象访问环境变量。例如，要访问名为 REACT_APP_API_URL 的变量：

const apiUrl = process.env.REACT_APP_API_URL;

结论

在 create-react-app 中，您可以使用环境变量来控制应用程序的行为。使用 .env 文件可以方便地覆盖默认值，并在不同的环境中设置不同的值。要访问环境变量，请使用 process.env 对象。