React 环境变量未使用 Dotenv 定义答案

【问题标题】：React Environmental Variables are undefined with DotenvReact 环境变量未使用 Dotenv 定义
【发布时间】：2022-02-10 13:58:42
【问题描述】：

我正在使用 dotenv 创建一个环境变量，以便使用 react、dotenv 和 webpack 将基本 url 插入到我的 API 调用中。

当我在代码中调用变量时，除了打印为未定义之外，我没有收到任何错误。我做错了什么？

这是我的 webpack 文件

const webpack = require("webpack");
const Dotenv = require("dotenv");

dotenv.config();

module.exports = (env) => {
  return {
    plugins: [
      new Dotenv(),
      new webpack.ProvidePlugin({
        process: "process/browser",
      }),
      new webpack.DefinePlugin({
        'process.env': JSON.stringify(process.env)
     })
    ],
  };
};

这是我项目根目录中 .env 文件中变量的样子

API_URL=http://localhost:8000
BASE_URL=https://my-url.com

这是我在代码中访问它的方式（使用 axios 进行身份验证）

  axiosAuth: axios.create({
    baseURL: `${process.env.BASE_URL}`,
    timeout: 5000,
  })

【问题讨论】：

REACT_APP_BASE_URL 就这样命名。每次设置 .env 变量时，都使用 REACT_APP_YOUR_VARIABLE_NAME 启动它可能会有所帮助

标签： reactjs webpack axios dotenv

【解决方案1】：

就像 Shah 已经解释的那样，您唯一需要的就是将前缀“REACT_APP”添加到您当前的变量中。改变这个：

API_URL=http://localhost:8000
BASE_URL=https://my-url.com

到这里：

REACT_APP_API_URL=http://localhost:8000
REACT_APP_BASE_URL=https://my-url.com

【讨论】：

【解决方案2】：

明确设置要定义的值而不是整个process.env。试试：

new webpack.DefinePlugin({
   'process.env': {
       API_URL: JSON.stringify(process.env.API_URL),
       BASE_URL: JSON.stringify(process.env.BASE_URL),
    }
})

如果你使用 create-react-app，前缀 REACT_APP_ 也可以，你可以删除定义插件和 Dotenv。

示例：

API_URL -> REACT_APP_API_URL // .env

用法：`process.env.REACT_APP_API_URL

【讨论】：