react使用.env文件管理全局變量的方法
更新時(shí)間：2023年01月31日 10:35:08 作者：好巧.
本文主要介紹了react使用.env文件管理全局變量的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
前言
本文基于“react”: “^18.2.0”
1.在根目錄創(chuàng)建一個(gè) .env 文件
2.配置全局變量
.env文件默認(rèn)是沒(méi)有語(yǔ)法高亮的，vscode編輯器可以下載 DotENV 擴(kuò)展插件
.env變量名必須以 REACT_APP 開(kāi)頭，單詞大寫(xiě)，以 _下劃線分割
.env變量更改之后，項(xiàng)目必須重啟才會(huì)生效
REACT_APP_MSG = 'hello world'
3.在項(xiàng)目中使用
通過(guò) process.env.變量名 獲取變量
4.效果圖
啟動(dòng)項(xiàng)目后，在控制臺(tái)查看console.log打印
到此這篇關(guān)于react使用.env文件管理全局變量的方法的文章就介紹到這了,更多相關(guān)react .env全局變量?jī)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
詳解React中傳入組件的props改變時(shí)更新組件的幾種實(shí)現(xiàn)方法
這篇文章主要介紹了詳解React中傳入組件的props改變時(shí)更新組件的幾種實(shí)現(xiàn)方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
React Native Popup實(shí)現(xiàn)示例
本文主要介紹了React Native Popup實(shí)現(xiàn)示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05
React實(shí)現(xiàn)圖片懶加載的常見(jiàn)方式
圖片懶加載是一種優(yōu)化網(wǎng)頁(yè)性能的技術(shù),它允許在用戶滾動(dòng)到圖片位置之前延遲加載圖片,通過(guò)懶加載,可以在用戶需要查看圖片時(shí)才加載圖片,避免了不必要的圖片加載,本文給大家介紹了React實(shí)現(xiàn)圖片懶加載的常見(jiàn)方式,需要的朋友可以參考下2024-01-01
本文主要介紹了react路由知識(shí)，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
React實(shí)現(xiàn)翻頁(yè)時(shí)鐘的代碼示例
本文給大家介紹了React實(shí)現(xiàn)翻頁(yè)時(shí)鐘的代碼示例,翻頁(yè)時(shí)鐘把數(shù)字分為上下兩部分,翻頁(yè)效果的實(shí)現(xiàn)需要通過(guò)設(shè)置 position 把所有的數(shù)組放在同一個(gè)位置疊加起來(lái),文中有詳細(xì)的代碼講解,需要的朋友可以參考下2023-08-08
使用useMutation和React Query發(fā)布數(shù)據(jù)demo
這篇文章主要為大家介紹了使用useMutation和React Query發(fā)布數(shù)據(jù)demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
在React中,state 是一個(gè)用于存儲(chǔ)組件內(nèi)部數(shù)據(jù)的特殊對(duì)象,每個(gè)React組件都可以包含自己的state,我們往往是通過(guò)修改state的值來(lái)驅(qū)動(dòng)React重新渲染組件,這篇文章主要介紹了React中state屬性,需要的朋友可以參考下2023-11-11
這篇文章主要介紹了React Class組件生命周期,包括react組件的兩種定義方式和class組件不同階段生命周期函數(shù)執(zhí)行順序，本文給大家介紹的非常詳細(xì)，需要的朋友可以參考下2021-08-08
useReducer使用詳解及其應(yīng)用場(chǎng)景
這篇文章主要介紹了useReducer使用詳解及其應(yīng)用場(chǎng)景,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
react?+?vite?+?ts項(xiàng)目中優(yōu)雅使用.svg文件
這篇文章主要為大家介紹了react?+?vite?+?ts項(xiàng)目中優(yōu)雅使用.svg文件,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08