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

简介: React .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)
}, [])
相关文章
|
6月前
create-react-app配置环境变量
create-react-app配置环境变量
156 0
|
6月前
|
前端开发 JavaScript
React .env 环境变量(详细使用、命名方式)
React .env 环境变量(详细使用、命名方式)
122 0
|
前端开发 JavaScript 开发者
React 项目结构和组件命名之道
> * 原文地址:[structuring projects and naming components in react](https://hackernoon.com/structuring-projects-and-naming-components-in-react-1261b6e18d76) > * 原文作者:[Vinicius Dacal](https://hackernoon.co
2672 0
|
6月前
|
设计模式 前端开发 数据可视化
【第4期】一文了解React UI 组件库
【第4期】一文了解React UI 组件库
360 0
|
6月前
|
存储 前端开发 JavaScript
【第34期】一文学会React组件传值
【第34期】一文学会React组件传值
76 0
|
6月前
|
前端开发
【第31期】一文学会用React Hooks组件编写组件
【第31期】一文学会用React Hooks组件编写组件
77 0
|
6月前
|
存储 前端开发 JavaScript
【第29期】一文学会用React类组件编写组件
【第29期】一文学会用React类组件编写组件
76 0
|
6月前
|
前端开发 开发者
【第26期】一文读懂React组件编写方式
【第26期】一文读懂React组件编写方式
64 0
|
6月前
|
资源调度 前端开发 JavaScript
React 的antd-mobile 组件库,嵌套路由
React 的antd-mobile 组件库,嵌套路由
121 0
|
6月前
|
存储 前端开发 中间件
React组件间的通信
React组件间的通信
52 1