在平時開發(fā)中，常常使用vue、react相關(guān)腳手架創(chuàng)建項目，在項目根目錄可以創(chuàng)建.env、.env.[mode]（mode為development、production、test)、.env.local等文件，然后在項目中就可以通過process.env來訪問相關(guān)的環(huán)境變量了。
下面針對如下問題進行總結(jié)：
1.process.env是什么（僅指在Node環(huán)境中），來自于哪里，所有項目都能通過process.env訪問環(huán)境變量嗎？
2. .env文件有哪幾種，
3. 當(dāng)同時存在.env、.env.[mode]文件時，process.env取值優(yōu)先從哪里取？

1.process.env是什么，來源于哪里

1.1 在node中

process ：The process object provides information about, and control over, the current Node.js process.(process對象提供有關(guān)當(dāng)前Node.js進程的信息和控制。)
process.env返回一個包含當(dāng)前用戶環(huán)境的對象【參考官網(wǎng)】

1.2 當(dāng)前用戶環(huán)境指什么

在操作系統(tǒng)中(本地為windows系統(tǒng),故以windows系統(tǒng)為例)，我們可以在高級系統(tǒng)設(shè)置中查看系統(tǒng)的環(huán)境變量。


而在node運行環(huán)境下process.env正好就是返回的當(dāng)前用戶操作系統(tǒng)的環(huán)境變量（.env文件中的環(huán)境變量將在下面提到，這里指非前端框架里面的js文件能訪問到的環(huán)境變量）。我們可以創(chuàng)建一個js文件打印process.env，并通過node執(zhí)行，查看打印結(jié)果

1.3 瀏覽器環(huán)境能訪問process.env類似的對象嗎

由于瀏覽器環(huán)境并沒有提供與操作系統(tǒng)環(huán)境變量直接交互的接口，在瀏覽器中運行的js并不能像在Node.js環(huán)境中那樣直接訪問操作系統(tǒng)的環(huán)境變量。
新建一個html文件并將上面打印process.env的js文件引入，在瀏覽器中打開此html文件，瀏覽器控制臺將報錯 process is not defined

1.4既然瀏覽器無法訪問系統(tǒng)環(huán)境變量，為什么目前流行的前端框架在代碼中使用了process.env訪問環(huán)境變量在瀏覽器中可以正常運行

目前常用的幾種前端框架，在本地的運行都是依賴于node環(huán)境的，所以在運行時是可以訪問process.env的。而部署在線上的項目，在打包時就已經(jīng)將相關(guān)環(huán)境變量靜態(tài)替換了，在瀏覽器中訪問時并沒有動態(tài)的去訪問系統(tǒng)或者文件的環(huán)境變量。

2. .env相關(guān)文件是什么，怎么使用

在前端開發(fā)中，我們常常把環(huán)境變量寫在.env相關(guān)文件中，再通過process.env（vite中使用import.meta.env）進行訪問。
這是因為我們使用的框架或者腳手架內(nèi)置了dotenv等插件，它會將.env相關(guān)文件中定義的字段添加到環(huán)境變量中

2.1 .env文件有哪幾種

一般情況，.env文件有4種情況

.env                # 在所有的環(huán)境中被載入
.env.local          # 在所有的環(huán)境中被載入，但會被 git 忽略
.env.[mode]         # 只在指定的模式中被載入,如env.development只在開發(fā)環(huán)境載入 
.env.[mode].local   # 只在指定的模式中被載入，但會被 git 忽略

nextjs:

vue-cli:

vite:

2.2 env文件中環(huán)境變量的定義方式

在env文件中通過 鍵=值 的方式定義環(huán)境變量，需要注意的是，不同的框架在定義環(huán)境變量時可能需要鍵以規(guī)定的前綴開頭，才能在客戶端使用，具體前綴可以查看所使用框架對應(yīng)官網(wǎng)。
如：
在nextjs中以EXT_PUBLIC_開頭的環(huán)境變量才能在在瀏覽器中使用（在服務(wù)端沒有這個限制）

2.2 各env文件的優(yōu)先級

.env（所有環(huán)境，最低優(yōu)先級）
.env.local（所有環(huán)境，但忽略于版本控制，高于 .env）
.env.[mode]（特定環(huán)境，高于 .env 和 .env.local）
.env.[mode].local（特定環(huán)境且忽略于版本控制，最高優(yōu)先級）

如在開發(fā)環(huán)境中優(yōu)先級為

.env.development.local > .env.development > .env.local >.env

在生產(chǎn)環(huán)境中優(yōu)先級為

.env.production.local > .env.production> .env.local >.env

當(dāng)高優(yōu)先級和低優(yōu)先級文件中都包含某環(huán)境變量時，使用高優(yōu)先級文件中的值

3. 系統(tǒng)環(huán)境變量和.env.*文件的優(yōu)先級

如果系統(tǒng)環(huán)境變量中定義了和env文件相同的環(huán)境變量那么，優(yōu)先級為：

系統(tǒng)環(huán)境變量>.env.*文件

注：在本地運行環(huán)境中，修改系統(tǒng)環(huán)境變量后，重新運行項目可能不會立即獲取到更新后的值，有時需要重啟系統(tǒng)后才能訪問到更新后的環(huán)境變量

4.動態(tài) or 靜態(tài)

在編譯時，環(huán)境變量會被靜態(tài)替換，所以部署到線上時，使用的環(huán)境變量是編譯時獲取到的環(huán)境變量，在運行的容器中相關(guān)系統(tǒng)環(huán)境變量更新后需要重新編譯才能更新系統(tǒng)中對應(yīng)的環(huán)境變量（對于服務(wù)端的接口等 訪問環(huán)境變量，本地驗證，也是靜態(tài)的，但是gpt說是動態(tài)的，需要在確認確認，也歡迎大佬賜教）