如何在 React JS 中設置默認全局配置 axios

Question

我想為我的 axios url 設置默認配置。 我已經在搜索，現在我有 3 頁。 app.js、index.js 和 config.env。 任何人都可以幫助我更正我的代碼，以便我可以在我的 JS 中進行全局配置。

這是我的代碼

index.js

        import React from "react";
        import ReactDOM from "react-dom";
        import { createBrowserHistory } from "history";
        import { Router, Route, Switch, Redirect } from "react-router-dom";
        import axios from 'axios';
        // core components
        import Admin from "layouts/Admin.js";
        import Dashboard from "layouts/Dashboard.js";
        require('dotenv').config()

        axios.defaults.baseURL = process.env.REACT_APP_BE_URL;
        //......

配置.env

        REACT_APP_BE_URL = 'http://localhost/url/api'

應用程序.js

   import React from "react";
   import axios from 'axios';
   require('dotenv').config()

   get = () => {
    const option = {
    url: REACT_APP_BE_URL + '/listpeople',

    method: 'POST',
    data: {
      "data": {
        "data": "...."
      },
    }

  };


  axios(option)
    .then(response => {
      this.setState({
        data: response.data.data,
        isLoading: false,
      });
      console.log(response.data);
    })

但是使用此代碼，我無法在我的 App.js 中獲取 REACT_APP_BE_URL。 幫助我更正我的代碼。

Answer 1

如果您想訪問全局配置，請按照以下步驟操作：

1. 在您的項目根目錄中創建.env 文件，而不是在 src 下，但是 .env 和 src 文件夾將是同級的。
2. 然后使用 process.env['REACT_APP_API_URL'] 或 process.env.REACT_APP_API_URL

如果它不起作用，請嘗試創建新的反應應用程序並按照以下步驟操作。