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

Question

我正在尝试根据环境修改我的 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 未定义。

捆绑文件是：

怎么了？

Answer 1

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

试试这个：

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

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

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

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

process.env is undefinined and I cannot read variable from it

reactjs

webpack

dotenv