React 項(xiàng)目中使用環(huán)境變量可以方便地在不同的環(huán)境中配置不同的參數(shù)，但是在有些場(chǎng)景下，我們需要在代碼運(yùn)行時(shí)動(dòng)態(tài)地設(shè)置環(huán)境變量。本文將介紹兩種常用的方法：使用 dotenv 庫和通過命令行參數(shù)傳遞環(huán)境變量。

使用 dotenv 庫

dotenv 是一個(gè)輕量級(jí)的 Node.js 庫，可以從 .env 文件中加載環(huán)境變量，非常方便。以下是使用步驟：

1. 安裝 dotenv 庫

在項(xiàng)目根目錄下執(zhí)行以下命令：

npm install dotenv --save-dev

2. 創(chuàng)建 .env 文件

在項(xiàng)目根目錄下創(chuàng)建一個(gè)名為 .env 的文件，并添加需要設(shè)置的環(huán)境變量，例如：

HEAD_ENV=test 
PUBLIC_URL=/punlick/

3. 在項(xiàng)目中使用環(huán)境變量

在項(xiàng)目中引入 dotenv 庫，并在需要使用環(huán)境變量的地方調(diào)用 dotenv.config() 方法。例如：

require('dotenv').config();

const env = process.env.HEAD_ENV;
const publicUrl = process.env.PUBLIC_URL;

需要注意的是，dotenv 庫會(huì)自動(dòng)將 .env 文件中的環(huán)境變量添加到 process.env 中。

通過命令行參數(shù)傳遞環(huán)境變量

除了使用 dotenv 庫外，還可以通過命令行參數(shù)傳遞環(huán)境變量。以下是使用步驟：

1. 在 package.json 中定義命令

在 package.json 中定義一個(gè)命令，用于運(yùn)行項(xiàng)目并傳遞環(huán)境變量。例如：

{
  "scripts": {
    "start": "react-scripts start",
    "startTest": "HEAD_ENV=test PUBLIC_URL=/datav/ react-scripts start"
  }
}

2. 在項(xiàng)目中使用環(huán)境變量

在項(xiàng)目中通過 process.env 獲取環(huán)境變量。例如：

const env = process.env.HEAD_ENV;
const publicUrl = process.env.PUBLIC_URL;

需要注意的是，通過命令行傳遞的環(huán)境變量只在執(zhí)行命令時(shí)有效，不會(huì)影響到其他地方的代碼。

示例代碼

以下是示例代碼，用于演示如何在 React 項(xiàng)目中使用上述方法動(dòng)態(tài)設(shè)置環(huán)境變量。

// 使用 dotenv 庫
require('dotenv').config();

const env = process.env.HEAD_ENV;
const publicUrl = process.env.PUBLIC_URL;

console.log(`Using dotenv library: env=${env}, publicUrl=${publicUrl}`);

// 通過命令行參數(shù)傳遞環(huán)境變量
const args = process.argv.slice(2);
const argEnv = args.find(arg => arg.startsWith('HEAD_ENV=')).split('=')[1];
const argPublicUrl = args.find(arg => arg.startsWith('PUBLIC_URL=')).split('=')[1];

console.log(`Using command line arguments: env=${argEnv}, publicUrl=${argPublicUrl}`);

總結(jié)

• 在 React 項(xiàng)目中，我們可以通過 process.env 來獲取環(huán)境變量。
• 如果要在代碼中使用環(huán)境變量，需要在項(xiàng)目根目錄下創(chuàng)建一個(gè) .env 文件，并在其中定義需要的環(huán)境變量。
• 在使用環(huán)境變量時(shí)，需要注意一些命名規(guī)則，比如要以 REACT_APP_ 開頭。
• 可以使用 dotenv 庫來簡(jiǎn)化環(huán)境變量的使用，它可以自動(dòng)讀取 .env 文件，并將其中的環(huán)境變量注入到 process.env 中。
• 如果需要在打包時(shí)動(dòng)態(tài)設(shè)置環(huán)境變量，可以使用命令行參數(shù)或者在 package.json 中定義腳本來實(shí)現(xiàn)。
• 如果需要根據(jù)不同的環(huán)境設(shè)置不同的環(huán)境變量，可以使用 cross-env 庫來設(shè)置環(huán)境變量。

到此這篇關(guān)于React 項(xiàng)目中動(dòng)態(tài)設(shè)置環(huán)境變量的文章就介紹到這了,更多相關(guān)React 動(dòng)態(tài)設(shè)置環(huán)境變量?jī)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！