dotenv-webpack生产环境问题：Heroku部署后环境变量未定义

我之前也碰到过这个问题，核心原因是dotenv-webpack默认只从本地.env文件加载变量，但Heroku上构建时并没有这个文件（它被.gitignore忽略了），而Heroku的环境变量是系统级的，需要让插件优先读取系统变量。

下面是具体的解决方案：

1. 修改dotenv-webpack配置，开启系统变量读取 #

调整你Webpack配置里的Dotenv插件，添加systemvars: true选项，让插件同时读取系统环境变量（包括Heroku设置的变量）：

const path = require('path');
const Dotenv = require('dotenv-webpack');
module.exports = {
  // 其他配置保持不变...
  plugins: [ 
    new Dotenv({
      path: path.resolve(__dirname,'.env'), // 本地开发时从这个文件读
      systemvars: true // 关键：开启后会读取系统级环境变量（比如Heroku的）
    }) 
  ],
};

这个选项的作用是：当本地.env文件里没有对应变量时，插件会自动从系统环境变量中查找，这样Heroku上设置的SECRET_KEY就能被正确读取了。

2. 确保Heroku构建阶段能访问环境变量 #

Heroku默认会在构建和运行阶段都暴露你设置的环境变量，不过要确认你没有在package.json的build脚本里覆盖环境变量。比如你的build脚本应该是类似这样的：

"scripts": {
  "build": "webpack --mode production"
}

不要在脚本里手动设置环境变量，避免覆盖Heroku的配置。

3. 本地测试验证 #

可以在本地模拟Heroku的环境，验证配置是否生效：
在终端执行以下命令（替换成你的环境变量）：

SECRET_KEY=123456 npm run build

然后检查dist/bundle.js里是否包含123456这个值，如果能找到，说明配置已经正确读取系统环境变量了。

4. 确认.env文件被正确忽略 #

确保你的.gitignore里包含.env，避免本地敏感信息被上传到Heroku：

# .gitignore
.env

这样调整后，本地开发时插件会读取.env文件，部署到Heroku时会自动读取Heroku设置的系统环境变量，就不会出现undefined的问题了。

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