- 创建
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
不包含了)
- 在
React
中需要使用,创建环境变量时,必须以REACT_APP_
为前缀(Vue
中则以VUE_APP_
为前缀)
例如:想写一个BASE_URL
环境变量,应该写为REACT_APP_BASE_URL=https://www.baidu.com
,=
前后空格可留可不留。 - 环境变量定义好之后,在代码中通过
process.env
对象访问.env
文件中的变量。
例如:访问上面定义的REACT_APP_BASE_URL
环境变量,通过process.env.REACT_APP_API_KEY
这样访问即可。
直接在App.tsx
中输出测试一下:
useEffect(() => { console.log(process.env.REACT_APP_BASE_URL) }, [])