为create-react-app项目搭建环境变量，适应不同环境需求

本文链接：https://blog.csdn.net/janyxh/article/details/103677586

本文介绍了如何为create-react-app项目设置环境变量，以适应不同环境需求。通过使用react-app-rewired自定义默认配置，并利用dotenv-cli管理.env文件，实现根据不同环境配置变量，特别是针对生产环境的接口地址调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.对create-react-app 的默认配置进行自定义

1.选择安装 react-app-rewired

$ yarn add react-app-rewired customize-cra

2.修改package.json文件

/* package.json */
"scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test",
+   "test": "react-app-rewired test",
}

3.在项目根目录创建一个 config-overrides.js 用于修改默认配置。

module.exports = function override(config, env) {
  // do stuff with the webpack config...
  return config;
};

二.添加自定义环境变量

1.安装dotenv-cli

$ yarn global add dotenv-cli

2.在根目录下添加.env.pre文件，写入变量。

REACT_APP_TITLE='pre'

其实我们需要的并不是配置其他环境包，而是在生产环境下，配置其他的变量，根据这个变量来配置不同的东西。无论在测试环境，预发布环境，我们始终需要的是生产环境包。所以在此处，配置一个变量，用于区分生产环境。

3.修改package.json文件

找到scripts，修改里面的配置

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "build:pre": "dotenv -e .env.pre react-app-rewired build",
    "test": "react-app-rewired test"
  },

4.根据环境变量进行配置

在这里以接口地址为例

let baseUrl = ''

if (process.env.NODE_ENV === 'development') {
	baseUrl = `接口地址` // 开发环境
}else if (
  process.env.NODE_ENV === 'production' &&
  process.env.REACT_APP_TITLE === 'pre'
) {
  baseUrl = `接口地址` // 预发布环境
} else if (
  process.env.NODE_ENV === 'production' &&
  process.env.REACT_APP_TITLE === 'production'
) {
  baseUrl = `接口地址` // 生产环境
}