React .env 环境变量（详细使用、命名方式）

一、简介

• 创建 React 项目后，默认是没有 .env 文件的，需要手动创建，也可以使用 dotenv 插件。（附：环境变量 .env 官方文档）
  
• 文件名规则：

• .env： 默认。
• .env.local：本地覆盖。为除测试之外的所有环境加载此文件。
• .env.development, .env.test, .env.production：特定于环境的设置。
• .env.development.local, .env.test.local, .env.production.local：本地覆盖特定于环境的设置。

• 不同文件名，在执行命令时的优先级，从左到右，左边优先局最高：

• $ npm start: .env.development.local > .env.local > .env.development > .env
• $ npm run build: .env.production.local > .env.local > .env.production > .env
• $ npm test: .env.test.local > .env.test > .env（注意 .env.local 不包含了）

二、使用

• 在 package.json 平级目录下创建 .env 配置文件，文件名根据需要按上面优先级选择一个即可。
  
• 在 React 中需要使用，创建环境变量时，必须以 REACT_APP_ 为前缀（Vue 中则以 VUE_APP_ 为前缀）
  例如：想写一个 BASE_URL 环境变量，应该写为 REACT_APP_BASE_URL=https://www.baidu.com，=前后空格可留可不留。
  
• 每次修改 .env 配置文件内容后，需要重新运行一遍项目，好像无法通过热更新生效。
  
• 环境变量定义好之后，在代码中通过 process.env 对象访问 .env 文件中的变量。
  例如：访问上面定义的 REACT_APP_BASE_URL 环境变量，通过 process.env.REACT_APP_API_KEY 这样访问即可。
  直接在 App.tsx 中输出测试一下：

import { useEffect } from 'react'
useEffect(() => {
  console.log(process.env.REACT_APP_BASE_URL)
}, [])