process.env 未定义，我无法从中读取变量答案

【问题标题】：process.env is undefinined and I cannot read variable from itprocess.env 未定义，我无法从中读取变量
【发布时间】：2021-10-23 18:03:30
【问题描述】：

我正在尝试根据环境修改我的 React 应用中的一些变量。

我开始使用.env 文件，我尝试了react evironment variables .env return undefined 中的所有解决方案，但没有成功。

我正在使用 VS2019，并做了以下操作：

我添加了dotenv 模块。这是我的package.json 文件的一部分：

"dependencies": {
  "@azure/msal-browser": "^2.16.1",
  "@azure/msal-react": "^1.0.1",
  "axios": "^0.21.1",
  "bootstrap": "^5.1.0",
  "dotenv": "^10.0.0", 
  "express": "^4.17.1",
  "jwt-decode": "^3.1.2",
  "react": "^17.0.2",
  "react-bootstrap": "^1.6.1",
  "react-cookie": "^4.1.1",
  "react-dom": "^17.0.2"  
},
"scripts": {
  "clean": "",
  "build": "webpack-cli ./src/index.jsx --config webpack.config.js"
}

然后我编辑了server.json 文件。我添加了一行：

require('dotenv').config()

app.use('/', express.static('dist', {
     index: "index.html"
}))

我还修改了文件webpack.config.js：

const webpack = require('webpack')

....

resolve: {
     extensions: ['.Webpack.js', '.web.js', '.ts', '.js', '.jsx', '.tsx']
},
plugins: [
     new webpack.DefinePlugin({
         BASE_URL_API: JSON.stringify('https://***.azurewebsites.net'),  
         BASE_URL_API_ENV: JSON.stringify(process.env.REACT_APP_BASE_URL_API),  
     })
]

最后我在项目的根文件夹中添加了3个.env文件：.env、.env.development和.env.production。

目前，所有文件的内容都相同。我使用了以下三行之一，而不是所有三行：

   REACT_APP_BASE_URL_API = https://***.azurewebsites.net
   REACT_APP_BASE_URL_API = 'https://***.azurewebsites.net'
   REACT_APP_BASE_URL_API = "https://***.azurewebsites.net"

最后我是这样使用变量的：

import axios from 'axios';

export const axiosClient = axios.create({
     baseURL: BASE_URL_API_ENV
     //baseURL: BASE_URL_API <-- This Line Works but it is not what I need 
});

现在当我通过 VS2019 启动项目时，会启动这个命令：webpack-cli ./src/index.jsx --config webpack.config.js（它是在package.json 文件中定义的那个）。但是，如果我使用命令 npm start 手动启动项目，我会得到相同的结果：

process.env 未定义。

捆绑的文件是：

怎么了？

【问题讨论】：

仅仅将react-scripts 添加为依赖项并不意味着您实际上在使用它——您拥有自己的build 命令和自定义Webpack 配置，但它没有实现 CRA 提供的所有功能。 REACT_APP_ 环境变量不会神奇地发生，您需要使用 DefinePlugin。
我不想使用 react 脚本...最初我使用的是 webpack...如果我不需要 react-script，我将其删除...
而且你没有使用它，你只是安装它。如果您想要它提供的功能，您需要使用它 ("build": "react-scripts build") 或查看它的实现方式并将其引入您自己的配置中。
我仍然不明白如何根据环境更改DefinePlugin 中的值...在您的链接中我看到'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV), 但我仍然无法阅读process.env
您应该能够在哪里构建应用程序。目前还不清楚您现在尝试了什么，我建议您提供一个 minimal reproducible example，以显示您对 DefinePlugin 的使用并去掉多余的 react-scripts。

标签： reactjs webpack dotenv

【解决方案1】：

从代码中我觉得应该在使用环境变量的文件中导入和配置dotenv。

试试这个：

require('dotenv').config(); 
import axios from 'axios';

export const axiosClient = axios.create({
     baseURL: process.env.REACT_APP_BASE_URL_API
});

我无法自行测试，因此可能会产生错误。

【讨论】：