reactjs - 无法在 axios post 方法中替换 process.env.hostname

Question

我是 UI/react 的新手，并在我的项目中配置 .env 文件。由于时间有限，我尝试通过 read.md 的 react 其中提到了添加自定义环境变量的部分。那里提到了环境变量是在构建时嵌入的。因此，我根据链接进行了更改，以便不需要构建并且可以在运行时读取值。

在 react 项目的 action.js 文件中，我正在尝试如下发布请求。Console.log 正在打印正确的值，但在发布请求中，URL 没有被替换。

export function createIdea(idea) {
    return function (dispatch){
      return axios.post('http://${process.env.REACT_APP_HOSTNAME}:${process.env.REACT_APP_PORT}/users/user',JSON.stringify(user),config).then(response => {
      // dispatch
      console.log('success')
        dispatch({
          type: CREATE_SUCCESSFUL,
          payload:response.data
        })
      }).catch(response=>{
        // dispatch
        console.log(process.env.REACT_APP_HOSTNAME);
        console.log(response)
        dispatch({
          type: CREATE_FAILED,
          payload:response
        })
      })
    }
}

在 webpack.config.dev.js 中，进行更改以在运行时读取配置。从此stackoverflow 链接中获取参考 webpack.config.dev.js 中的更改如下：在文件顶部，添加

var dotenv = require('dotenv').config({path: '../.env'});

内部插件部分，添加

new webpack.DefinePlugin({
            "process.env": dotenv.parsed
        }),

我保存在根位置的 .env 文件如下所示：

REACT_APP_HOSTNAME=localhost

REACT_APP_PORT=8080

如果遗漏任何配置或我误解了任何内容或需要在 axios 上完成其他操作，请提供一些指示

标签： reactjswebpack

Answer 1

创建一个 axios 配置文件，这样您就不必一遍又一遍地重复 URL：

import axios from "axios";

const api = axios.create({
  baseURL: process.env.REACT_APP_BASE_URL // or process.env.BASE_URL if not using CRA
});

export default api;

现在您将为 AJAX 请求导入此配置：

import api from '../path/to/utils/axiosConfig.js';

如果您使用create-react-app，则react-scripts允许您自动使用.env文件。请参阅create-react-app 文档。

工作 CRA 示例：

---

但是，如果您像我一样，并且使用自定义 webpack 配置，那么这里有一个工作示例：custom-webpack-envs

dotenv可以在这里和这里找到实现：

要运行上面的示例...

1. 在桌面上打开一个终端。

2. 克隆回购：git clone [e-mail]:mattcarlotta/custom-webpack-envs.git

3. 更改目录：cd custom-webpack-envs

4. 安装依赖项：yarn install

5. 运行服务器：yarn dev