如何在 react app 中使用 dotenv 传递环境变量？我不确定答案

【问题标题】：How can I pass environment variables by using dotenv in react app ? I get undefined如何在 react app 中使用 dotenv 传递环境变量？我不确定
【发布时间】：2022-11-10 17:26:49
【问题描述】：

这是我的反应前端应用程序。要从 node.js 后端传递数据，我需要成功传递 API url。目前我将地址设置为我的本地主机。

我正在努力将 process.env.API_URL 路径到我的配置文件。

我的文件结构是

.src
  - config
    * config.js
  - .env
.webpack.config.js

我的 .env 文件是

API_URL=http://localhost:3006

我的配置文件在下面，但我在这里得到“未定义”作为我的控制台结果。显然变量没有成功通过。

console.log(process.env.API_URL)

const config = {
  host: process.env.API_URL
};

export default config;

我已经安装了“npm install dotenv --save”和“npm i dotenv-webpack”

在我的 Webpack.config.js 里面如下。我觉得我离工作太近了，但我无法弄清楚这里有什么问题。

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const webpack = require("webpack");
const dotenv = require('dotenv');
dotenv.config({ path: './.env' }); 


module.exports = {
plugins: [
    new webpack.DefinePlugin({
      'process.env.API_URL': JSON.stringify(process.env.API_URL),
    }),
  ],
};

任何建议表示赞赏。谢谢你。

【问题讨论】：

标签： reactjs webpack dotenv

【解决方案1】：

好吧，您在 src 文件夹中有 .env，并且您正尝试在与 webpackConfig 相同的级别访问它。因此，将.env 文件移动到与配置相同的级别或修复您的导入。

【讨论】：