react 配置环境变量（测试环境，正式环境等）

添加自定义环境变量 – 官网中文文档地址

dotenv – dotenv文档

第一步，创建文件夹

在项目根目录创建.env.local .env.development .env.production 文件夹

注意：
创建的文件夹名称以.evn开始,
新增的的变量统一以REACT_APP_开头

1
2
3
4
5
6
7
8
# 公共的环境变量  .env
REACT_APP_VERSION = ${npm_package_version} # 包版本

# 测试环境的环境变量 .env.development
REACT_APP_ENV = 'development' # 包环境

# 正式环境的环境变量 .env.production
REACT_APP_ENV = 'production' # 包环境

第二步，安装dotenv

1
npm install dotenv-cli --save-dev

第三步，编辑配置pagckage.json下scripts

注意：左侧的文件比右侧的文件具有更高的优先级(左边的-e .env.development优先于右边的-e .env)

1
2
3
4
5
6
7
{
  "scripts": {
    "start": "dotenv -e .env.development -e .env node scripts/start.js",
    "build": "dotenv -e .env.production -e .env node scripts/build.js",
    "test": "node scripts/test.js"
  }
}

第四步，引用环境变量

###在 js 中引用环境变量process.env.加上变量名

1
console.log('REACT_APP_VERSION==>', process.env.REACT_APP_VERSION)

###在 html 中引用环境变量 两个%包裹变量名

1
<title>%REACT_APP_WEBSITE_NAME%</title>