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)
  }, [])