reactjs代码示例：使用文件方式配置及使用环境变量

柔光的暖阳◎ 2024-02-17 13:36 24阅读 0赞

在React中，我们通常使用.env文件来存储环境变量，并使用`dotenv`库来加载这些环境变量。这使得我们可以为不同的环境设置不同的变量。下面是一个React应用程序中如何使用.env文件和`dotenv`库的示例。

首先，你需要安装`dotenv`库。在你的项目目录中，打开终端并运行以下命令：

npm install dotenv

或者

yarn add dotenv

然后，创建一个名为 `.env` 的文件，并在此文件中添加环境变量。例如：

REACT_APP_API_URL=https://api.example.com/

然后，在你的React应用程序的入口文件（例如 `src/index.js`）中，引入并使用 `dotenv`：

import React from 'react';
    import ReactDOM from 'react-dom';
    import dotenv from 'dotenv';
    
    dotenv.config();
    
    // 使用环境变量
    const apiUrl = process.env.REACT_APP_API_url;
    console.log(apiUrl); // 输出: "https://api.example.com/"
    
    ReactDOM.render(<App />, document.getElementById('root'));

在此示例中，我们使用 `dotenv.config()` 来加载 `.env` 文件中的环境变量。然后我们可以通过 `process.env` 访问这些环境变量。注意，你需要使用与`.env`文件中相同的名称来访问环境变量，但不需要前置 `REACT_APP_`。

你也可以在构建过程中预加载环境变量。如果你使用的是 Create React App，可以通过在 `package.json` 文件中添加一个 “preinstall” 脚本来实现：

"scripts": {
        
      "preinstall": "dotenv install"
    }

然后运行 `npm run install` 或 `yarn install` 命令来在构建项目之前加载环境变量。

发表评论取消回复

表情：

评论列表（有 0 条评论，24人围观）

还没有评论，来说两句吧...

相关阅读

相关 reactjs antd代码示例：Bubble组件和message组件使用示例

Ant Design（AntD）是一个优秀的前端UI框架，为React应用程序提供了一整套设计语言和高质量的React组件。以下是一个使用AntD的`message`和`Bub

偏执的太偏执、/ 2024年02月17日 13:37/ 0 赞/ 68 阅读

相关 reactjs antd代码示例：使用文件方式配置及使用环境变量

以下是一个使用 Ant Design（一个流行的React UI库）和环境变量的ReactJS代码示例。我们将使用.env文件来配置环境变量，并使用`dotenv`库来加载这些

Dear 丶/ 2024年02月17日 13:36/ 0 赞/ 24 阅读

相关 reactjs代码示例：使用文件方式配置及使用环境变量

在React中，我们通常使用.env文件来存储环境变量，并使用`dotenv`库来加载这些环境变量。这使得我们可以为不同的环境设置不同的变量。下面是一个React应用程序中如何

柔光的暖阳◎/ 2024年02月17日 13:36/ 0 赞/ 25 阅读

相关 reactjs代码示例：安装antd及axios发送请求

在React项目中安装antd和axios，以及使用axios发送请求的步骤如下： 1. 安装antd：打开终端，进入你的React项目目录，然后运行以下命令

一时失言乱红尘/ 2024年02月17日 13:36/ 0 赞/ 62 阅读

相关 reactjs代码示例：事件处理

该代码是一个使用React框架创建的页面，包含一个名为Demo的组件，该组件具有两个输入框和一个按钮。点击按钮或失去焦点时，会弹出相应输入框的值。该代码同时引入了React、R

我就是我/ 2024年02月17日 13:35/ 0 赞/ 23 阅读

相关 reactjs函数式组件使用props属性代码示例

这段HTML代码是一个使用React函数组件的例子。首先引入了React和ReactDOM的核心库以及Babel和prop-types库。然后定义了一个名为Person的函数组

比眉伴天荒/ 2024年02月17日 13:35/ 0 赞/ 71 阅读

相关 reactjs redux combineReducers代码示例

在ReactJS中使用Redux时，可以使用`combineReducers`函数将多个子Reducer组合成一个根Reducer。下面是一个示例代码，展示了如何使用`comb

约定不等于承诺〃/ 2024年02月17日 13:17/ 0 赞/ 74 阅读

相关 reactjs hooks useEffect使用示例

name更新的时候就会调用: ![在这里插入图片描述][acd84ddbf8b341038be219d5a84d6725.png_pic_center] 传空数组整个A

「爱情、让人受尽委屈。」/ 2023年09月28日 15:00/ 0 赞/ 13 阅读

相关 Vue项目使用.env文件配置全局环境变量

> .env 默认全局配置文件 > .env.development 开发环境配置文件 > .env.production 生产环境配置文件 > 文件名为Vue的约定

悠悠/ 2022年12月16日 13:00/ 0 赞/ 175 阅读

相关配置python环境及环境变量

转载：[https://www.cnblogs.com/huangbiquan/p/7784533.html][https_www.cnblogs.com_huangbiqua

旧城等待，/ 2022年04月16日 06:16/ 0 赞/ 296 阅读