dotenv-webpack 无法在生产环境中加载环境变量答案

【问题标题】：dotenv-webpack cannot load env varibles on productiondotenv-webpack 无法在生产环境中加载环境变量
【发布时间】：2021-11-08 13:22:46
【问题描述】：

我想要做的是将环境变量设置为 CRA，但使用 webpack。我创建了两个 env 文件，就像 CRA 所做的那样。 .env.development 和 .env.production。这两个文件在 CRA 中工作。我在webpack 配置文件中使用dotenv-webpack 来设置process.env 变量，如下代码所示。它在本地主机上工作，但不在生产环境中。

const Dotenv = require("dotenv-webpack")
const isProduction = process.env.NODE_ENV === "production"

//webpack config
modules.exports = {
...
 plugins: [
        new Dotenv({
            path: `./.env.${isProduction ? "production" : "development"}`,
        }),
 ...
 ]
...
}

在package.json，我使用：

"scripts": {
    "build": "cross-env NODE_ENV=production webpack",
    "start": "cross-env NODE_ENV=development webpack serve"
}

所以我可以在 webpack 上获得正确的 isProduction 变量。

谁能帮我解决它？

【问题讨论】：

标签： webpack create-react-app dotenv

【解决方案1】：

首先，您的.env 文件不应该被推送到您的 git 存储库中。所以指定路径是没有用的。您应该直接在您的 docker 配置中输入这些变量，或者在 Netlify/Heroku 的环境变量区域中输入这些变量。然后让你的 dotenv 插件在生产环境中工作，只需添加：

new Dotenv({ systemvars: true }),

【讨论】：

不，我不使用 Heroku。我将 react 构建文件直接放入 AWS S3，所以我只能上传构建文件。我将在 git repo 上推送一个 env-sample 而不是 .env.production 和 .env.development。