官網(wǎng)文檔地址：https://www.html.cn/create-react-app/docs/adding-custom-environment-variables/
dotenv配置與使用:https://juejin.cn/post/6917794798732574733
dotenv 的使用:https://juejin.cn/post/6844904198929121288
僅供自己學習使用，噴子勿評。
npm -g install dotenv-cli
在實際開發(fā)中，前端er會面對多個環(huán)境的接口：開發(fā)環(huán)境、測試環(huán)境、生產(chǎn)環(huán)境...這些環(huán)境最終要的區(qū)別是API的URL不同，所以代碼中不能將URL寫死，而是要根據(jù)不同的環(huán)境配置。
注：create-react-app或者 umi這樣的腳手架初始化的項目，會將webpack的配置黑盒化了，如何在不執(zhí)行 eject 操作的前提下優(yōu)雅地配置多個項目環(huán)境呢？（最好不要一遇到問題就一鍵執(zhí)行 eject 操作， eject 操作是不可逆的，執(zhí)行之后會把所有細節(jié)都暴露在我們面前，讓項目目錄變得很龐大）
create-react-app 支持多環(huán)境，接下來我們一起看下如何設置。
1、react自帶的兩個環(huán)境變量：
1.1）NODE_ENV
create-react-app 創(chuàng)建的項目有內置的環(huán)境變量NODE_ENV，該變量是自動賦值的，不可更改。在js代碼中可通過 process.env.NODE_ENV 讀取它。NODE_ENV 默認有三個可能的值，分別是：
- development：開發(fā)環(huán)境，運行 npm start, NODE_ENV 的值為 development;
- test：測試環(huán)境，運行npm run test 則是 test;
- production：生產(chǎn)環(huán)境，運行npm run build 則對應 prodution.
比如開發(fā)環(huán)境的 API 的 URL 為 urlDev，生產(chǎn)環(huán)境的 URL 為 urlProd，就可通過環(huán)境變量，判斷當前環(huán)境，使用相應的 URL：
let env = process.env.NODE_ENV
let baseUrl = ''
if (env === 'development') {
baseUrl = urlDev
} else if (env === 'production') {
baseUrl = urlProd
}
get(baseUrl) // 偽代碼，表示請求動作
簡單的系統(tǒng)，我們通過上面代碼已經(jīng)能夠完成不同環(huán)境的設置了。
1.2）PUBLIC_URL：
這個變量可以用于引用模塊系統(tǒng)之外的資源路徑前綴，用create-react-app腳手架創(chuàng)建的react項目，在public目錄下，有index.html、favicon.ico等文件，index.html中使用了該變量引用圖片：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
默認改變量的值是空（“”），上面index.html中，href=“/favicon.ico”表示站點根路徑，可以設置該變量為cdn，加速靜態(tài)資源訪問效率。
1）如何使用改變量：
html中通過%PUBLIC_URL% 獲取變量值
js中通過process.env.PUBLIC_URL 獲取變量值
2）設置該變量：
在.env文件中設置該變量的值為一個合法的url路徑，打包后，在使用該變量的文件中就會被替換成對應的值。（.env文件相關內容見下文）
更多的自建變量：https://create-react-app.dev/docs/advanced-configuration/
2、多環(huán)境設置：
項目的根目錄添加一系列名為 .env的文件，里面寫上變量名和值，打包后，可以在js代碼中通過process.env.REACT_APP_XXX讀取到對應文件中的變量值。
注：文件中的變量必須以REACT_APP_ 開頭，其他的react不識別。
說明：此功能適用于 react-scripts@0.5.0 及更高版本，可以通過以下命令更新：
npm install --save --save-exact react-scripts@1.1.4
2.1）默認可以使用哪些 .env 文件？
默認，可以在項目根目錄下建立如下文件：
- .env：默認。
- .env.local：本地覆蓋。除 test 之外的所有環(huán)境都加載此文件。
- .env.development, .env.test, .env.production：設置特定環(huán)境。
- .env.development.local, .env.test.local, .env.production.local：設置特定環(huán)境的本地覆蓋。
左側的文件比右側的文件具有更高的優(yōu)先級：
- npm start： .env.development.local, .env.development, .env.local, .env
- npm run build： .env.production.local, .env.production, .env.local, .env
- npm test： .env.test.local, .env.test, .env (注意沒有 .env.local )
注：實際測試發(fā)現(xiàn)添加完.env文件后，需要重新執(zhí)行npm start后，代碼中獲取變量才能生效。
看個示例：
1）在項目根目錄建立兩個文件：
.env.development文件，內容：REACT_APP_TEST=development
.env.production文件，內容：REACT_APP_TEST=production
2）在js中通過如下代碼訪問變量：
function App() {
return (
<div className="App">
{process.env.REACT_APP_TEST}<br/>
</div>
);
}
export default App;
3）訪問變量值：
執(zhí)行npm start后，訪問頁面，得到的變量值為：development
執(zhí)行npm build后，再執(zhí)行serve -s build，訪問頁面，得到的變量值為：production
2.2）dotenv管理環(huán)境變量：
上面知道，默認通過create-react-app創(chuàng)建的react項目只能支持上面幾種.evn文件，并且通過npm run build只能指定.env.production和默認.env文件中的環(huán)境變量，假設系統(tǒng)還有個stage環(huán)境，該如何指定呢？官方推薦使用dotenv來做環(huán)境變量的管理。dotenv的github地址：https://github.com/motdotla/dotenv
看一個例子：
1）在項目根目錄建立三個文件：
- .env.development文件，內容：REACT_APP_TEST=development
.env.stage文件，內容：REACT_APP_TEST=stage
.env.production文件，內容：REACT_APP_TEST=production
2）在js中通過如下代碼訪問變量：
同上
3）修改 package.json 中的 scripts來指定環(huán)境：
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"build:stage": "dotenv -e .env.stage react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
4）訪問變量值：
npm run build:stage
在使用前需要安裝dotenv-cli（https://github.com/entropitor/dotenv-cli），否則會報如下錯誤：
# npm run build:stage
> test@0.1.0 build:stage /tmp/test
> dotenv -e .env.development react-scripts build
sh: dotenv: command not found
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! test@0.1.0 build:stage: `dotenv -e .env.development react-scripts build`
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the test@0.1.0 build:stage script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /root/.npm/_logs/2020-08-30T16_22_57_811Z-debug.log
安裝dotenv-cli：
# npm -g install dotenv-cli
[..................] / rollbackFailedOptional: verb npm-session dfed37ae051d8c52
[..................] \ fetchMetadata: sill resolveWithNewModule dotenv-cli@3.2.0 checking installable status
[..................] \ fetchMetadata: sill resolveWithNewModule dotenv-cli@3.2.0 checking installable status
/usr/local/node-v12.9.0-linux-x64/bin/dotenv -> /usr/local/node-v12.9.0-linux-x64/lib/node_modules/dotenv-cli/cli.js
然后再次執(zhí)行：npm run build:stage，之后啟動serve：serve -s build
訪問頁面，得到變量值為：test
參考：
https://www.html.cn/create-react-app/docs/adding-custom-environment-variables/
https://juejin.im/post/6844904015528984583
https://blog.csdn.net/ZYC88888/article/details/82729313
https://juejin.im/post/6844903968288538638
————————————————
原文鏈接：https://blog.csdn.net/liuxiao723846/article/details/108313832
