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文件管理全局变量相关推荐

从零开始，教你用Webpack构建React基础工程
20170415更新推荐大家使用facebook官方构建工具facebookincubator/create-react-app来创建React基础工程前言随着前端代码越来越多,越来越复杂,整个 ...
从零开始，用Webpack构建React基础教程
20170315更新由于webpack已更新至2.0版本,许多配置项都已改变,所以可能本文有些项已经过时了推荐大家使用facebook官方构建工具facebookincubator/create- ...
React的source code init时会自动检测Chrome dev tool的react extension装了没
Sent: Friday, 19 February, 2016 5:41 PM React的source code init时会自动检测Chrome dev tool的react extension装 ...
React的工作原理,为什么我直接从JSBin copy到本地的代码无法执行
Friday, February 19, 2016 5:41 PM 当时我还纳闷render()里传进去的参数既不是function,也不是string,而是一个html tag,这不是syntax ...
为React应用添加国际化支持
国际化一般可分为以下几个挑战: 1.检测用户的语言环境; 2.翻译UI元素.标题和提示; 3.提供特定于地区的内容,如日期.货币和数字. 在本文中,我将只关注前端部分.我们将开发一个简单的通用Reac ...
从零开始一个webpack+react项目
从零开始一个webpack+react项目最近在做react组件化的分享,从项目中抽离组件,那么第一步自然是搭建相关的环境本篇旨在从零开始,用最少的配置.最少的代码.最少的依赖来搭建一个最简单的w ...
linux查看定义shell的全局变量和局部变量
在shell中,有以下两种变量全局变量:不仅对当前shell,对其子进程也可见局部变量:只能在定义他们的进程中可见 1.定义一个局部变量tom tom=test 2.定义一个全局变量jack ex ...
react 单元测试 (jest+enzyme)
react 单元测试 (jest+enzyme) 为什么要做单元测试作为一个前端工程师,我是很想去谢单元测试的,因为每天的需求很多,还要去编写测试代码,感觉时间都不够用了. 不过最近开发了一个比较复 ...
react 阮一峰_React的工作原理，为什么我直接从JSBin copy到本地的代码无法执行
Friday, February 19, 2016 5:41 PM 当时我还纳闷render()里传进去的参数既不是function,也不是string,而是一个html tag,这不是syntax ...

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

react 使用.env文件管理全局变量相关推荐

最新文章

热门文章