react使用.env文件管理全局变量的方法

更新时间：2023年01月31日 10:35:08 作者：好巧.

本文主要介绍了react使用.env文件管理全局变量的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

前言

本文基于“react”: “^18.2.0”

1.在根目录创建一个 .env 文件

在这里插入图片描述

2.配置全局变量

.env文件默认是没有语法高亮的，vscode编辑器可以下载 DotENV 扩展插件

.env变量名必须以 REACT_APP 开头，单词大写，以 _下划线分割

.env变量更改之后，项目必须重启才会生效

REACT_APP_MSG = 'hello world'

在这里插入图片描述

3.在项目中使用

通过 process.env.变量名 获取变量

在这里插入图片描述

4.效果图

启动项目后，在控制台查看console.log打印

在这里插入图片描述

到此这篇关于react使用.env文件管理全局变量的方法的文章就介绍到这了,更多相关react .env全局变量内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

详解React中传入组件的props改变时更新组件的几种实现方法
这篇文章主要介绍了详解React中传入组件的props改变时更新组件的几种实现方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-09-09
React Native Popup实现示例
本文主要介绍了React Native Popup实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-05-05
React实现图片懒加载的常见方式
图片懒加载是一种优化网页性能的技术,它允许在用户滚动到图片位置之前延迟加载图片,通过懒加载,可以在用户需要查看图片时才加载图片,避免了不必要的图片加载,本文给大家介绍了React实现图片懒加载的常见方式,需要的朋友可以参考下
2024-01-01
五分钟教你了解一下react路由知识
本文主要介绍了react路由知识，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-09-09
React实现翻页时钟的代码示例
本文给大家介绍了React实现翻页时钟的代码示例,翻页时钟把数字分为上下两部分,翻页效果的实现需要通过设置 position 把所有的数组放在同一个位置叠加起来,文中有详细的代码讲解,需要的朋友可以参考下
2023-08-08
使用useMutation和React Query发布数据demo
这篇文章主要为大家介绍了使用useMutation和React Query发布数据demo，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-12-12
React中state属性案例详解
在React中,state 是一个用于存储组件内部数据的特殊对象,每个React组件都可以包含自己的state,我们往往是通过修改state的值来驱动React重新渲染组件,这篇文章主要介绍了React中state属性,需要的朋友可以参考下
2023-11-11
React Class组件生命周期及执行顺序
这篇文章主要介绍了React Class组件生命周期,包括react组件的两种定义方式和class组件不同阶段生命周期函数执行顺序，本文给大家介绍的非常详细，需要的朋友可以参考下
2021-08-08
useReducer使用详解及其应用场景
这篇文章主要介绍了useReducer使用详解及其应用场景,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
react + vite + ts项目中优雅使用.svg文件
这篇文章主要为大家介绍了react + vite + ts项目中优雅使用.svg文件,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-08-08