在使用 create-react-app
构建React应用程序时,您可以通过在项目的根目录下创建一个 .env
文件来设置环境变量。环境变量在 .env
文件中是以 REACT_APP_
的前缀开始的。这是 create-react-app
的约定,用以确保只有以 REACT_APP_
开头的环境变量才会被嵌入到构建中的应用程序里。
如果您想在构建时添加特定的变量,您可以按照以下步骤操作:
- 在项目的根目录下创建一个新的文件,命名为
.env
。 - 在
.env
文件中添加环境变量,确保以REACT_APP_
开头,例如:shellREACT_APP_API_URL=https://myapi.com REACT_APP_FEATURE_FLAG=true
- 在您的React代码中,您可以通过
process.env.REACT_APP_API_URL
和process.env.REACT_APP_FEATURE_FLAG
来访问这些变量。
如果您需要为不同的环境(开发、测试、生产)设置不同的变量,您也可以创建特定环境的 .env
文件,例如:
.env.local
:本地开发环境变量。.env.development
:开发环境变量。.env.test
:测试环境变量。.env.production
:生产环境变量。
当您运行 npm run build
或 yarn build
时,create-react-app
构建脚本将会默认使用 .env.production
中的变量。
例如,如果您想在生产环境中设置一个API URL,您可以这样做:
- 在项目根目录下创建
.env.production
文件。 - 添加如下内容:
shell
REACT_APP_API_URL=https://production.api.com
- 当您运行构建脚本时,
REACT_APP_API_URL
将被设置为 "https://production.api.com"。
确保在将代码推送到版本控制系统(如Git)之前,不要在 .env
文件中包含敏感信息(如密码或API密钥)。通常这些敏感信息应该通过安全的方式提供,比如通过CI/CD管道中的环境变量配置。
2024年6月29日 12:07 回复