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

柔光的暖阳◎ 2024-02-17 13:36 11阅读 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 条评论，11人围观）

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

相关阅读

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

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

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

相关 reactjs antd代码示例：antd表格组件使用，以及在表格中展示图片示例（＜img src=“图片“ /＞方式）

import React from 'react'; import { Table } from 'antd';

╰半橙微兮°/ 2024年02月17日 13:36/ 0 赞/ 9 阅读

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

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

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

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

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

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

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

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

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

相关 reactjs类式组件代码示例

执行了`ReactDOM.render(<MyComponent/>.......`之后，发生了什么？ 1.React解析组件标签，找到了MyComponent组件。

末蓝、/ 2024年02月17日 13:17/ 0 赞/ 11 阅读

相关 reactjs函数式组件代码示例

如下展示了如何创建和渲染函数式组件的示例。首先，创建了一个名为MyComponent的函数式组件，并在JSX中使用。然后，使用ReactDOM.render函数将组件渲染到页面

青旅半醒/ 2024年02月17日 13:17/ 0 赞/ 50 阅读

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

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

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

相关服务器使用及环境配置

服务器使用及环境配置服务器使用： GPU操作 Linux 一些操作 Conda+Pytorch环境配置 co

Love The Way You Lie/ 2022年11月03日 11:53/ 0 赞/ 245 阅读

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

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

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