React项目读取.env环境变量失败，process.env为undefined如何解决？

问题根因 #

1. webpack 运行环境未加载.env配置
   你仅在后端服务的server.js中引入了dotenv加载配置，而webpack编译前端代码时是独立的Node.js进程，webpack.config.js中没有加载dotenv，因此DefinePlugin读取process.env.REACT_APP_BASE_URL_API时本身就是undefined，自然无法正确注入到前端代码中。
2. .env文件语法不符合规范
   你写的变量声明存在等号前后多余空格、值额外包裹引号的问题，dotenv解析时会将空格、引号识别为值的一部分，甚至无法正确识别变量名。
3. 未区分环境加载对应的.env文件
   dotenv默认仅加载根目录的.env文件，你需要额外配置才能根据当前环境加载.env.development/.env.production。

修复步骤 #

1. 调整webpack.config.js配置 #

在文件最顶部添加dotenv加载逻辑，同时支持按环境加载对应配置文件：

const webpack = require('webpack')
// 新增dotenv加载逻辑
require('dotenv').config()
const env = process.env.NODE_ENV || 'development'
// 加载对应环境的配置，优先级高于通用.env
require('dotenv').config({ path: `.env.${env}` })

// ... 其余原有配置保持不变
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),  
     })
]

你可以在DefinePlugin上方添加console.log(process.env.REACT_APP_BASE_URL_API)，运行打包命令时观察控制台是否输出正确的接口地址，确认webpack已成功读取环境变量。

2. 修正所有.env文件的语法 #

删除变量名、等号、值之间的所有空格，同时去掉值的包裹引号：

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

3. 调整package.json脚本，指定运行环境 #

如果需要区分开发/生产环境的变量，给脚本添加NODE_ENV标识：

注：Windows系统直接设置NODE_ENV会报错，可先安装cross-env依赖，在命令前加上cross-env前缀即可跨平台兼容。

"scripts": {
  "start": "NODE_ENV=development webpack serve --config webpack.config.js",
  "build": "NODE_ENV=production webpack-cli ./src/index.jsx --config webpack.config.js"
}

4. 注意前端代码的变量使用 #

你已经通过DefinePlugin注入了全局变量BASE_URL_API_ENV，前端代码直接使用该变量即可，不要在前端代码中直接写process.env.xxx，前端运行在浏览器环境本身不存在process全局对象，自然会报process.env is undefined的错误。

内容的提问来源于stack exchange，提问作者Simone