React項目中怎么動態設置環境變量

今天小編給大家分享一下React項目中怎么動態設置環境變量的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

使用 dotenv 庫

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

1. 安裝 dotenv 庫

在項目根目錄下執行以下命令：

npm install dotenv --save-dev

2. 創建 .env 文件

在項目根目錄下創建一個名為 .env 的文件，并添加需要設置的環境變量，例如：

HEAD_ENV=test 
PUBLIC_URL=/punlick/

3. 在項目中使用環境變量

在項目中引入 dotenv 庫，并在需要使用環境變量的地方調用 dotenv.config() 方法。例如：

require('dotenv').config();

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

需要注意的是，dotenv 庫會自動將 .env 文件中的環境變量添加到 process.env 中。

通過命令行參數傳遞環境變量

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

1. 在 package.json 中定義命令

在 package.json 中定義一個命令，用于運行項目并傳遞環境變量。例如：

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

2. 在項目中使用環境變量

在項目中通過 process.env 獲取環境變量。例如：

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

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

示例代碼

以下是示例代碼，用于演示如何在 React 項目中使用上述方法動態設置環境變量。

// 使用 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}`);

// 通過命令行參數傳遞環境變量
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}`);

以上就是“React項目中怎么動態設置環境變量”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。